Question

我有以下HTML：

<html>
  <body>
    <div> 
      <span> $12.95 </span>
    </div>
  </body>
</html>

以下Javascript：

var all = document.body.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
  console.log(all[i].nodeValue);
}

当它到达元素时，我在控制台中看到null。我想知道如何才能获得页面中所有元素的文本？我知道，如果我使用innerHTML，我会得到文本，但后来我会以某种方式重复文本。因此，对于<div>，我会得到<span> $12.95 </span>，然后对于<span>，我会得到$12.95

Answer 1

如果要使用nodeValue获取内容，则必须遍历到跨度中包含的文本节点。

http://jsfiddle.net/xLJMb/

var all = document.body.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
  console.log(all[i].nodeValue);
  for(var j = 0, max2 = all[i].childNodes.length; j < max2; j++) {
    console.log(all[i].childNodes[j].nodeValue);
  }
}

文本节点不是元素，因此getElementsByTagName（）不会直接返回它们。

Answer 2

为什么不使用这个html：

<div>
    <span id="span">$12.95 </span>
</div>

和这个脚本：

console.log($('#span').html());

Answer 3

作为上述答案的补充，在现代浏览器中，如果您只想迭代文本节点，可以使用TreeWalker API：

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  // Using ES6 arrow function, this is removing all "empty" text nodes
  // equivalent to:
  // function (node) { return !!node.nodeValue.trim() }
  node => !!node.nodeValue.trim()
);

while(treeWalker.nextNode())
  console.log(treeWalker.currentNode.nodeValue);

为什么nodeValue没有得到<span> </span>之间的文本

3 个答案: