TEXT_NODE：仅返回文本？

Question

我正在使用JavaScript来从DOM对象中提取所有文本。 我的算法遍历DOM对象本身，它是后代，如果节点是TEXT_NODE类型而不是累积它的nodeValue。
出于一些奇怪的原因，我也得到了类似的东西：

#hdr-editions a { text-decoration:none; }
#cnn_hdr-editionS { text-align:left;clear:both; }
#cnn_hdr-editionS a { text-decoration:none;font-size:10px;top:7px;line-height:12px;font-weight:bold; }
#hdr-prompt-text b { display:inline-block;margin:0 0 0 20px; }
#hdr-editions li { padding:0 10px; }

我该如何过滤？ 我需要使用其他东西吗？ 我只想要文字。

Answer 1

从事物的外观来看，你也是从<style>元素中收集文本。 您可能想要检查这些：

var ignore = { "STYLE":0, "SCRIPT":0, "NOSCRIPT":0, "IFRAME":0, "OBJECT":0 }

if (element.tagName in ignore)
    continue;

您可以将任何其他元素添加到对象图中以忽略它们。

Answer 2

您想跳过style元素。

在你的循环中，你可以这样做......

if (element.tagName == 'STYLE') {
   continue;
}

你也可能想跳过script ， textarea等。

Answer 3

就DOM而言，这是文本。 你必须过滤掉（跳过） <script>和<style>标签。

Answer 4

[在阅读OP对安迪的优秀答案的评论后添加了答案]

问题是您在内容通常不由浏览器呈现的元素内部看到文本节点 - 例如STYLE和SCRIPT标记。

扫描DOM树时，我假设使用深度优先搜索，您的扫描应跳过此类标记的内容 。

例如 - 递归深度优先的DOM树walker可能如下所示：

function walker(domObject, extractorCallback) {
    if (domObject == null) return; // fail fast
    extractorCallback(domObject);
    if (domObject.nodeType != Node.ELEMENT_NODE) return;
    var childs = domObject.childNodes;
    for (var i = 0; i < childs.length; i++)
        walker(childs[i]);
}

var textvalue = "":
walker(document, function(node) { 
    if (node.nodeType == Node.TEXT_NODE)
        textvalue += node.nodeValue;
});

在这种情况下，如果你的步行者遇到你不知道你不想看到他们内容的标签，你应该跳过进入树的那一部分。 所以walker()必须如此改编：

var ignore = { "STYLE":0, "SCRIPT":0, "NOSCRIPT":0, "IFRAME":0, "OBJECT":0 }

function walker(domObject, extractorCallback) {
    if (domObject == null) return; // fail fast
    extractorCallback(domObject);
    if (domObject.nodeType != Node.ELEMENT_NODE) return;

    if (domObject.tagName in ignore) return; // <--- HERE

    var childs = domObject.childNodes;
    for (var i = 0; i < childs.length; i++)
        walker(childs[i]);
}

这样，如果我们看到你不喜欢的标签，我们只是跳过它及其所有子节点，你的提取器永远不会暴露给这些标签内的文本节点。