栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

与textNodes等效的getElementsByTagName()

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

与textNodes等效的getElementsByTagName()

更新

我已经概述了这6种方法在1000次运行中的每种的一些基本性能测试。

getElementsByTagName
是最快的,但它完成了一半的工作,因为它不会选择所有元素,而是仅选择一种特定类型的标签(我认为
p
),并且盲目地假设其firstChild是文本元素。它可能没有什么瑕疵,但它只是出于演示目的,并将其性能与
TreeWalker

  1. Using a TreeWalker
  2. Custom Iterative Traversal
  3. Custom Recursive Traversal
  4. Xpath query
  5. querySelectorAll
  6. getElementsByTagName

让我们暂时假设有一种方法可以让您

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

每种方法的来源:

树行者

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) {  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 *");     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 (handicap)

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(        "/    }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/387916.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号