2

我有这样的代码：

<div id="container">
Lorem ipsum dolor sit amet
<p>This is a paragraph</p>
<br />
<span>This is a span</span>
Lorem ipsum dolor sit amet
</div>

是否可以在此 div 中获取所有文本节点和标签？我想通过数组访问每个节点（包括文本）。

例如：

for(var i=0;i<nodesArray.length;i++)
{
    document.write("Node: "+nodesArray[i]+"<br />");
}

输出：

Node: Lorem ipsum dolor sit amet
Node: This is a paragraph
Node: This is a span
Node: Lorem ipsum dolor sit amet

我在 jquery 中尝试了“所有选择器”，但它只获取标签，而不是文本..

4

4 回答 4

1

您可以使用以下代码来执行此操作。基本上，childNodes获取作为元素子节点的所有节点的列表。之后，我们必须遍历整个获取的节点列表，然后根据需要打印输出。

if条件 onchildren[i].textContent.trim() != ""用于排除空节点（包括标签<br/>）。

window.onload = function() {
  var children = document.getElementById("container").childNodes;
  for (var i = 0; i < children.length; i++) {
    if (children[i].textContent.trim() != "")
      document.getElementById("output").innerHTML += "Node: " + children[i].textContent + "<br/>";
  }
}
<div id="container">
  Lorem ipsum dolor sit amet
  <p>This is a paragraph</p>
  <br />
  <span>This is a span</span>
  Lorem ipsum dolor sit amet
</div>

<hr>
<h3>Output</h3>

<div id="output">

</div>

于 2013-08-27T10:39:01.710 回答
0

使用 jquery，您可以使用方法 .children() ( http://api.jquery.com/children/ ) 将所有子项获取到容器 div 中，然后从每个子项中获取值并打印出来。

于 2013-08-27T10:33:01.580 回答
0

要获取元素中包含的文本，请使用该.text()函数。例如$('#container').text()或在这种情况下

$("#container").find('*').add('#container').map(function() { return $(this).text }).get()
于 2013-08-27T10:33:42.830 回答
0 
 jQuery("#container").html()

这将返回所有文本和子元素，但不会像您期望的那样作为数组返回。也许您可以使用它来验证并做任何您想做的事情。

于 2013-08-27T10:41:12.580 回答