通过使用的新的浏览器API过滤多余节点
2015-09-10 15:51
405 查看
DOM属性诸如childNodes,firstChild和nextSibling不区分元素节点和其他类型节点,比如注释和文本节点(通常只是两个节点间的空格)。很多情况下只需要访问元素节点,因此在循环中需要检查返回节点的的类型并过滤掉非元素节点。这些类型检查都是不必要的DOM操作。
许多现代的浏览器提供的API可以只返回元素节点。如果可用的话推荐使用这些API,因为它们的执行效率比自己在JavaScript代码中过滤的效率要更高。下表列出了这些便利的DOM属性。
【兼容性】
表中所有属性都被FF3.5、Safari4、Chrome2及Opera9.62支持
IE6、7、8只支持children属性
【总结】
使用children替代childNodes会更快,因为集合项更少。HTML源码中的空白实际是文本节点,而且它并不包含在children集合中。
许多现代的浏览器提供的API可以只返回元素节点。如果可用的话推荐使用这些API,因为它们的执行效率比自己在JavaScript代码中过滤的效率要更高。下表列出了这些便利的DOM属性。
属性名 | 被替换的属性 |
---|---|
children | childNodes |
childElementCount | childeNodes.length |
firstElementChild | firstChild |
lastElementChild | lastChild |
nextElementSibling | nextSibling |
previousElementSibling | preniousSibling |
表中所有属性都被FF3.5、Safari4、Chrome2及Opera9.62支持
IE6、7、8只支持children属性
【总结】
使用children替代childNodes会更快,因为集合项更少。HTML源码中的空白实际是文本节点,而且它并不包含在children集合中。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- Mootools 1.2教程(2) DOM选择器
- DOM 事件流详解
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- Dom在ajax技术中的作用说明
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法