php中js的遍历,js如何进行元素遍历

小灰灰 2023-01-13 05:57 101阅读 0赞

这次给大家带来js如何进行元素遍历，js进行元素遍历的注意事项有哪些，下面就是实战案例，一起来看一下。

支持Element Traversal 规范的浏览器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。

对于元素间的空格，在IE9之前，都不会返回文档节点，其它的所有浏览器都会返回文档节点。

为了兼容浏览器这间的差异，又不更改已有的DOM 标准，所以有了 Element Traversal 规范。

这个规范为 元素增加了 5 个 属性

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSibling

详细官方文档; http://www.w3.org/TR/ElementTraversal/

对于元素间的空格，IE9以前的版本不会返回文本节点，而其他浏览器都会将空格当做是文本节点返回。这就导致了在使用childNodes和firstChild的属性时行为的不一致。为了弥补这一差异，而同时又保持DOM规范的不变，W3C Element Traversal规范新定义了一组属性。

Element Traversal API为DOM元素添加了下面5个属性：childElementCount：返回子元素(不包括文本节点和注释)的个数。

firstElementChild：指向第一个子元素。

lastElementChild：指向最后一个子元素。

previousElementSibling：指向前一个同辈元素。

nextElementSibling：指向后一个同辈元素。

支持的浏览器为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;

\}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

相关 php中js的遍历,js如何进行元素遍历

这次给大家带来js如何进行元素遍历，js进行元素遍历的注意事项有哪些，下面就是实战案例，一起来看一下。支持Element Traversal 规范的浏览器有IE 9+、Fi

小灰灰/ 2023年01月13日 05:57/ 0 赞/ 102 阅读

相关 JS遍历与JQuery遍历

JS遍历语法： for(初始化值;循环结束条件;步长) html代码： <!DOCTYPE html> <html> <head>

电玩女神/ 2022年12月25日 15:59/ 0 赞/ 130 阅读

相关 html遍历map,vue.js如何遍历map

vue.js遍历map的方法：vue使用【v-for】遍历Map，代码为【】。 ![550490421eee8d245ab44c58ebe1c049.png][] 【相

落日映苍穹つ/ 2022年10月07日 08:50/ 0 赞/ 277 阅读

相关 js数组遍历、对象遍历、字符串遍历

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 数组遍历 for \--使用变量将数组长度缓

男娘i/ 2022年10月02日 00:49/ 0 赞/ 253 阅读

相关 js数组遍历

js里面，数组遍历有很多种方式。经典版： for (var index = 0; index < myArray.length; index++) {

野性酷女/ 2022年08月19日 14:15/ 0 赞/ 218 阅读

相关 js数组遍历和对象遍历

[http://www.cnblogs.com/yizhilin/p/7344675.html][http_www.cnblogs.com_yizhilin_p_7344675

傷城~/ 2022年03月16日 02:36/ 0 赞/ 320 阅读

相关 JS遍历对象

var tripInfo = { "2019-5-1": 0, "2019-5-2": 0, "

秒速五厘米/ 2022年02月20日 03:06/ 0 赞/ 317 阅读

相关 js数组遍历

<p id="demo"></p> <script> var txt = ""; var list = [{

曾经终败给现在/ 2021年09月30日 23:46/ 0 赞/ 439 阅读

相关 js中如何遍历对象属性

对象声明： 1、var obj = \{\}//字面量，建议这种方式(方便初始化赋值) 2、var obj = new Object(); 对象赋值： 1、obj.

水深无声/ 2021年07月27日 02:45/ 0 赞/ 434 阅读

相关 js数组遍历和对象遍历

针对js各种遍历作一个总结分析，从类型用处：分数组遍历和对象遍历；还有性能，优缺点等。 JS数组遍历： 1，普通for循环，经常用的数组遍历 var a

曾经终败给现在/ 2021年07月26日 22:57/ 0 赞/ 605 阅读