怎么在JavaScript中遍历DOM元素?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
DOM中为元素新增了下面几个属性:
childElementCount
:返回子元素(不包括文本节点和注释)的数量;firstElementChild
:firstChild的元素版;lastElementChild
:lastChild的元素版;previousElementSibling
和nextElementSibling
对应着previousSibling
,nextSibling
的元素版
假设html如下,我们想遍历出div中的所有元素节点:
一般来说,区别元素节点,属性节点,文本节点的通用方式是判断该节点的nodeType。
常见的几种nodeType:
元素节点:1,
属性节点:2,
文本节点:3,
注释节点:8,
……
<div id="list"> <p>hello</p> <span>world</span> <em>cookieParse()</em> </div>
方式1:用firstChild
,lastChild
进行元素遍历:
var list = document.getElementById('list'); var child = list.firstChild; console.log(list.nextSibling) while(child != list.lastChild){ if(child.nodeType == 1){ console.log( child ); } child = child.nextSibling; }
使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:
方式2:使用firstElementChild
,nextElementSibling
var list = document.getElementById('list'); var child = list.firstElementChild; while(child){ console.log( child ); child = child.nextElementSibling; }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。