javascript - getElementsByTagName() 等效于 textNodes

Question

有没有办法得到所有textNode的集合文档中的对象？

getElementsByTagName()非常适合 Elements，但是 textNode s 不是元素。

更新:我意识到这可以通过遍历 DOM 来完成 - 正如下面许多人所建议的那样。我知道如何编写一个查看文档中每个节点的 DOM-walker 函数。我希望有一些浏览器原生的方式来做到这一点。毕竟我能得到所有的<input>有点奇怪s 有一个内置调用，但不是所有 textNode

Answer 1

更新:

我已经概述了这 6 种方法中的每一种在 1000 次运行中的一些基本性能测试。 getElementsByTagName 是最快的，但它完成了一半的工作，因为它没有选择所有元素，而是只选择一种特定类型的标签(我认为 p)并盲目地假设它的 firstChild 是一个文本元素。它可能有一点缺陷，但它用于演示目的并将其性能与 TreeWalker 进行比较。 Run the tests yourselves on jsfiddle查看结果。

1. 使用 TreeWalker
2. 自定义迭代遍历
3. 自定义递归遍历
4. Xpath 查询
5. querySelectorAll
6. 通过标签名获取元素

让我们暂时假设有一种方法可以让您本地获取所有 Text 节点。您仍然需要遍历每个生成的文本节点并调用 node.nodeValue 以获取实际文本，就像您对任何 DOM 节点所做的那样。所以性能问题不在于遍历文本节点，而是遍历所有非文本节点并检查它们的类型。我认为(根据结果)TreeWalker 的执行速度与 getElementsByTagName 一样快，甚至更快(即使 getElementsByTagName 播放有障碍)。

Ran each test 1000 times.Method                  Total ms        Average ms--------------------------------------------------document.TreeWalker          301            0.301Iterative Traverser          769            0.769Recursive Traverser         7352            7.352XPath query                 1849            1.849querySelectorAll            1725            1.725getElementsByTagName         212            0.212

---

Source for each method:

TreeWalker

function nativeTreeWalker() {
    var walker = document.createTreeWalker(
        document.body, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );

    var node;
    var textNodes = [];

    while(node = walker.nextNode()) {
        textNodes.push(node.nodeValue);
    }
}

递归树遍历

function customRecursiveTreeWalker() {
    var result = [];

    (function findTextNodes(current) {
        for(var i = 0; i < current.childNodes.length; i++) {
            var child = current.childNodes[i];
            if(child.nodeType == 3) {
                result.push(child.nodeValue);
            }
            else {
                findTextNodes(child);
            }
        }
    })(document.body);
}

迭代树遍历

function customIterativeTreeWalker() {
    var result = [];
    var root = document.body;

    var node = root.childNodes[0];
    while(node != null) {
        if(node.nodeType == 3) { /* Fixed a bug here. Thanks @theazureshadow */
            result.push(node.nodeValue);
        }

        if(node.hasChildNodes()) {
            node = node.firstChild;
        }
        else {
            while(node.nextSibling == null && node != root) {
                node = node.parentNode;
            }
            node = node.nextSibling;
        }
    }
}

querySelectorAll

function nativeSelector() {
    var elements = document.querySelectorAll("body, body *"); /* Fixed a bug here. Thanks @theazureshadow */
    var results = [];
    var child;
    for(var i = 0; i < elements.length; i++) {
        child = elements[i].childNodes[0];
        if(elements[i].hasChildNodes() && child.nodeType == 3) {
            results.push(child.nodeValue);
        }
    }
}

getElementsByTagName(障碍)

function getElementsByTagName() {
    var elements = document.getElementsByTagName("p");
    var results = [];
    for(var i = 0; i < elements.length; i++) {
        results.push(elements[i].childNodes[0].nodeValue);
    }
}

XPath

function xpathSelector() {
    var xpathResult = document.evaluate(
        "//*/text()", 
        document, 
        null, 
        XPathResult.ORDERED_NODE_ITERATOR_TYPE, 
        null
    );

    var results = [], res;
    while(res = xpathResult.iterateNext()) {
        results.push(res.nodeValue);  /* Fixed a bug here. Thanks @theazureshadow */
    }
}

此外，您可能会发现此讨论有帮助 - http://bytes.com/topic/javascript/answers/153239-how-do-i-get-elements-text-node