JS操作html时childNodes的替代方法[兼容IE与FF]

最新推荐文章于 2021-06-24 17:53:19 发布

PostX

最新推荐文章于 2021-06-24 17:53:19 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： html ie 浏览器 div list

本文链接：https://blog.youkuaiyun.com/alloyer/article/details/2152230

本文探讨了在不同浏览器（IE与FF）环境下使用JavaScript操作HTML时，如何处理childNodes属性以获取正确的子节点。文中提供了两种方法：一是利用nodeType属性筛选元素节点；二是直接使用getElementsByTagName方法获取特定标签名的子节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js操作document时，试图使用childNodes取得Div节点的Div子节点，IE浏览器中没有任何问题，
而FF浏览器会将TEXT_NODE类型的节点同样计入子节点，这样就会操作到错误的对象。

解决方法一般有两种，
一种是使用node的nodeType属性判断结点的类型，然后进行操作。
这种方法意味着，使用var childnodelist=document.getElementById("mydiv").childNodes;得到的childnodelist在两个浏览器下并不是相同的list，而这种方法是通过nodeType对该列表进行了筛选，过滤出ELEMENT_NODE类型的节点，然后进行操作。
另一种方法，则是不使用childNodes来实现该功能，可以使用var childnodelist=document.getElementById("mydiv").getElementsByTagName("div");这种方法，直接会取得Div下的div类型的标签。在两种浏览器下，这种方法得到的list是相同的。

比较：使用第一种方法，借助了nodeType属性来完成该操作，表现在js代码上是if...else...筛选目标，第二种方法借助标签得到了该子节点，表现在js代码上，会有childnodelist[i*n+j]取得子节点。