JavaScript操纵DOM纠错两则

2024年5月6日 176次阅读

浏览器的差异，对dom本身内部机理的不熟悉都有可能产生错误。今天又用错了两个地方。

1、关于class和className
class属性在HTML DOM中扮演很重要的角色，css和DTHML都可能大量用到。但javascript的浏览器差异性仍然存在。动态设置一个element的属性：element.setAttribute(“class”, vName);语句在firefox中是行的通的，可是IE内核的浏览器却不认识”class”，而得改用”className”，同样，firefox也不认识”className”。所以常用的方法是二者兼备：
   element.setAttribute(“class”, vName);
   element.setAttribute(“className”, vName);  //for IE

2、删除某个节点的所有子节点
这“某个节点”可能使用getElementById或其他方法得到的。删除方法如下：
   while(element.hasChildNodes()==true){
        element.removeChild(element.childNodes[0]);
   }
简简单单两句话，看似没什么了不起。之前我用for循环（有经验的人一看就不该用），先用element.childNodes获得element的子元素集，然后获取该元素集的数组长度，在进行循环删除。当时就发现元素多了一个（55成了56），没在意。后来发现删除到第28个元素就退出循环了，出现了循环中的“奇蹟”。想想，莫非childNodes里包括element本身？且DOM是树结构，又采用中序遍历的算法？结果到第28个后把element自己给删掉了，也就什么都没了。

 

点赞