javascript - 获取标签内的所有节点

Question

我有这样的代码:

<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 中尝试了“所有选择器”，但它只获取标签，而不获取文本..

Answer 1

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

if条件为children[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>