如何获取html文档中标记之后的“那里”文本:
<p><a>hello</a>there</p>
我看到有一种方法可以使用xpath:
但是我没有使用xpath,我希望不必为此开始。我意识到我可以获得p标签内的所有文本,但我想获得“那里”文本,以及知道它与p和标签的关系。它似乎不是任何人的孩子或兄弟姐妹。 (你可以假设我可以获得任何其他元素/节点,因此它可以相对于那些。)每个DOM教程似乎都忽略了文本可以在标记之外发生的事实。
感谢。
答案 0 :(得分:7)
类似于this?
var p = document.getElementsByTagName("p")[0];
alert(p.childNodes[1].textContent)
答案 1 :(得分:5)
使用此.. http://jsfiddle.net/2Dxy4/
这是您的HTML -
<p id="there">
<a>hello</a>
there
</p>
在你的JS中
alert(document.getElementById("there").lastChild.textContent)
或
alert(document.getElementById("there").childNodes[1].textContent)
答案 2 :(得分:0)
您可以使用lastChild和textContent来获取它:http://jsfiddle.net/M3vjR/
答案 3 :(得分:0)
如果您使用jQuery,那么有一种偷偷摸摸的方式来获取此
x = $("<p><a>hello</a>there</p>")
x.contents()[1]
答案 4 :(得分:0)
您可以找到父标签的子标签:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Project Method</title>
<!-- Google Captcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/static/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- Bootstrap Select -->
<link href="/static/css/bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbootstrap.com/docs/jquery/" target="_blank">
<strong>MDB</strong>
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank">Free download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free tutorials</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded"
target="_blank">
<i class="fab fa-github mr-2"></i>MDB GitHub
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar --> </header>
<div class="wrapper">
<!--Main layout-->
<main class="page-content mt-5 pt-5">
<div class="container">
<div class="container-fluid full-page-container">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-lg-6 col-sm-8 animated fadeIn">
<div class="card">
<h5 class="card-header pink lighten-3 white-text text-center py-4">
<strong>Добавление участников</strong>
</h5>
<div class="card-body px-lg-5 pt-0">
<form action="/projects/project/12/team/create" method="post"
style="color: #757575;">
<!-- CSRF Token -->
<input type="hidden" name="_csrf" value="90930bb8-44b3-4f26-8fe9-a62c46264360"/>
<div class="form-group">
<label for="teamName">Название команды</label>
<input type="text" id="teamName" name="teamName" value=""
class="form-control " required>
</div>
<div class="form-group">
<div id="select-form-control">
<select name="teamUsers"
class="selectpicker form-control "
data-actions-box="true"
data-dropup-auto="false"
data-live-search="true"
data-selected-text-format="count"
data-size="10"
data-style="btn-info text-white"
data-width="97%"
multiple
required
>
<option value="3">student student</option>
<option value="4">student student</option>
<option value="5">student student</option>
</select>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button"
onClick='location.href="/projects/project/12"'
class="btn btn-outline-pink waves-effect">
Отмена
</button>
<button type="submit" class="btn btn-unique waves-effect">
Сохранить
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<!--Call to action-->
<div class="pt-4">
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank" role="button">Download MDB
<i class="fas fa-download ml-2"></i>
</a>
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<!-- Social icons -->
<div class="pb-4">
<a href="https://www.facebook.com/mdbootstrap" target="_blank">
<i class="fab fa-facebook-f mr-3"></i>
</a>
<a href="https://twitter.com/MDBootstrap" target="_blank">
<i class="fab fa-twitter mr-3"></i>
</a>
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
<i class="fab fa-youtube mr-3"></i>
</a>
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
<i class="fab fa-google-plus-g mr-3"></i>
</a>
<a href="https://dribbble.com/mdbootstrap" target="_blank">
<i class="fab fa-dribbble mr-3"></i>
</a>
<a href="https://pinterest.com/mdbootstrap" target="_blank">
<i class="fab fa-pinterest mr-3"></i>
</a>
<a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">
<i class="fab fa-github mr-3"></i>
</a>
<a href="http://codepen.io/mdbootstrap/" target="_blank">
<i class="fab fa-codepen mr-3"></i>
</a>
</div>
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-3">
© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<!-- jQuery Multi -->
<script type="text/javascript" src="/static/js/multi.js"></script>
<!-- Bootstrap Select -->
<script type="text/javascript" src="/static/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/static/js/defaults-ru_RU.min.js"></script>
<!-- jQuery Validation -->
<script type="text/javascript" src="/static/js/jquery.validate.js.js"></script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
$(function () {
window.setTimeout(function () {
$('#my-alert').alert('close');
}, 5000);
});
$("form").validate();
</script>
</body>
</html>
最后,您可以在@*@formatter:off*@
节点之后的var pTag = ...
var childNodes = pTag.childNodes;
节点中找到文本。
答案 5 :(得分:-1)
你必须首先得到一个属性innerhtml,然后使用substring来获取total innerhtml,你可以拥有你的部分..
$(document).ready(function () {
var getA=$("p >a").text();
var getA=getA.length;
var takeTotal=$("p").text();
var result=takeTotal.substring(get);
alert(result);
});