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中尝试了“all selector”但它只获得了标签，而不是文本..

Answer 1

使用jquery，您可以使用方法.children（）（http://api.jquery.com/children/）将所有子节点传递给容器div，而不是从每个子节点获取值并打印出来。

Answer 2

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

$("#container").find('*').add('#container').map(function() { return $(this).text }).get()

Answer 3

您可以使用以下代码执行此操作。基本上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>

Answer 4

 jQuery("#container").html()

这将返回所有text和child元素，但它不会像预期的那样返回数组。也许你可以用它来验证并做你想做的事。

获取标记内的所有节点

4 个答案: