视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js如何进行元素遍历
2020-11-27 19:40:03 责编:小采
文档


这次给大家带来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;
    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    推荐阅读:

    如何操作Vue做出proxy代理

    vue中v-cloak加载时闪烁如何处理

    下载本文
    显示全文
    专题