您的位置:首页 > Web前端 > JavaScript

通过使用的新的浏览器API过滤多余节点

2015-09-10 15:51 405 查看
DOM属性诸如childNodes,firstChild和nextSibling不区分元素节点和其他类型节点,比如注释和文本节点(通常只是两个节点间的空格)。很多情况下只需要访问元素节点,因此在循环中需要检查返回节点的的类型并过滤掉非元素节点。这些类型检查都是不必要的DOM操作。

许多现代的浏览器提供的API可以只返回元素节点。如果可用的话推荐使用这些API,因为它们的执行效率比自己在JavaScript代码中过滤的效率要更高。下表列出了这些便利的DOM属性。

属性名被替换的属性
childrenchildNodes
childElementCountchildeNodes.length
firstElementChildfirstChild
lastElementChildlastChild
nextElementSiblingnextSibling
previousElementSiblingpreniousSibling
【兼容性】

表中所有属性都被FF3.5、Safari4、Chrome2及Opera9.62支持
IE6、7、8只支持children属性

【总结】
使用children替代childNodes会更快,因为集合项更少。HTML源码中的空白实际是文本节点,而且它并不包含在children集合中。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript dom