0

我有以下 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

4

3 回答 3

1

如果要使用 nodeValue 来获取内容，则必须向下遍历到包含在 span 中的文本节点。

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() 不会直接返回它们。

于 2013-10-29T18:02:28.177 回答
0

为什么不使用这个 html：

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

这个脚本：

console.log($('#span').html());
于 2013-10-29T18:02:37.570 回答
0

作为上述答案的附录，在现代浏览器中，如果您只想迭代文本节点，您可以使用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);
于 2013-10-29T18:45:56.513 回答