JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
来源:互联网 发布:mac 无法启动安全模式 编辑:程序博客网 时间:2024/06/15 23:51
对于元素间的空格,IE9 及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点。这样,
就导致了在使用childNodes 和firstChild 等属性时的行为不一致。为了弥补这一差异,而同时又保
持DOM 规范不变,Element Traversal 规范(www.w3.org/TR/ElementTraversal/)新定义了一组属性。
Element Traversal API 为DOM 元素添加了以下5 个属性。
childElementCount:返回子元素(不包括文本节点和注释)的个数。
firstElementChild:指向第一个子元素;firstChild 的元素版。
lastElementChild:指向最后一个子元素;lastChild 的元素版。
previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
就导致了在使用childNodes 和firstChild 等属性时的行为不一致。为了弥补这一差异,而同时又保
持DOM 规范不变,Element Traversal 规范(www.w3.org/TR/ElementTraversal/)新定义了一组属性。
Element Traversal API 为DOM 元素添加了以下5 个属性。
childElementCount:返回子元素(不包括文本节点和注释)的个数。
firstElementChild:指向第一个子元素;firstChild 的元素版。
lastElementChild:指向最后一个子元素;lastChild 的元素版。
previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
支持的浏览器为DOM 元素添加了这些属性,利用这些元素不必担心空白文本节点,从而可以更方
便地查找DOM 元素了。
下面来看一个例子。过去,要跨浏览器遍历某元素的所有子元素,需要像下面这样写代码。
var i,len,child = element.firstChild;while(child != element.lastChild){if (child.nodeType == 1){ //检查是不是元素processChild(child);}child = child.nextSibling;}而使用Element Traversal 新增的元素,代码会更简洁。var i,len,child = element.firstElementChild;while(child != element.lastElementChild){processChild(child); //已知其是元素child = child.nextElementSibling;}支持Element Traversal 规范的浏览器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。
0 0
- JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之文档模式第11.4.1讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之children属性第11.4.2讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之contains()方法第11.4.3讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之插入文本第11.4.4讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之滚动第11.4.5讲
- JavaScript高级程序设计之DOM 扩展之HTML5之焦点管理第11.3.2讲
- JavaScript高级程序设计之DOM 扩展之HTML5之HTMLDocument的变化第11.3.3讲
- JavaScript高级程序设计之DOM 扩展之HTML5之字符集属性第11.3.4讲
- JavaScript高级程序设计之DOM 扩展之HTML5之自定义数据属性第11.3.5讲
- JavaScript高级程序设计之DOM 扩展之HTML5之插入标记第11.3.6讲
- JavaScript高级程序设计之DOM 扩展之HTML5之scrollIntoView()方法第11.3.7讲
- JavaScript高级程序设计之DOM 扩展之选择符API第11.1讲
- JavaScript高级程序设计之DOM 扩展之HTML5之与类相关的扩充第11.3.1讲
- JavaScript高级程序设计之DOM之DOM 操作技术之动态脚本第10.2.1讲
- JavaScript高级程序设计之DOM之DOM 操作技术之动态样式第10.2.2讲
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- JavaScript高级程序设计之DOM之DOM 操作技术之使用NodeList第10.2.4讲
- erl 在windows 命令行 弹出提示框
- android 开发之 显示图片
- SDWebImage下载和缓存图片(UIImge)
- [转]Android ANR 分析解决方法
- java Collection.sort指定升序或降序
- JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
- XMl 文档格式学习
- 错误整理(五)No CurrentSessionContext configured!
- HDOJ 题目4460 Friend Chains(树的最长链)
- Android CountDownLatch的使用
- xCode中去除“Implicit declaration of function 'setxattr' is invalid in C99” 警告
- 进阶计划
- 什么是堆和栈,它们在哪儿
- 软件文档的作用