原生JS总结1------操作遍历的dom元素_原生js遍历dom-优快云博客

本文详细解析了在JavaScript中修改DOM元素类名时遇到的问题及解决方案，包括数组长度变动导致的操作错误，以及如何通过不同方法避免此类问题。重点在于理解DOM操作的自动查找机制和数组长度变化对后续操作的影响。

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

参考地址：http://www.verydemo.com/demo_c110_i666.html

例如：有一组class='area'的div，这时我们需要修改其className。

一般写法为（方法一）：

var _divArr = document.getElementsByClassName('area');
var divLength;
for(var i=0;0<divLength;i++){
      _divArr[i].className = 'othersName';
}

但是这种情况下产生的效果却不是我们想要的，会发现每次是间隔一个div变化一次，而且会报‘’这种错误。这是什么原因呢？！

主要是由于每次操作这个dom元素的时候，原生js会自动再通过原来的查找条件再来查找一次，这里是通过document.getElementsByClassName('area')进行查找的，但是此时刚刚修改了classname的dom元素类名已经修改了，这样_divArr数组就发生了变化，其leng也减小了，这样就导致每次修改的都是隔行数据，而且最后还会报js错误。

其解决方案

var _divArr = document.getElementsByClassName('area');
var divLength;
for(var i=0;0<divLength;i++){
      _divArr[0].className = 'othersName';    //0 与 i的区别
}

2、但是如果这里将_divArr通过document.getElementsByTagName('div')来查找的话，再修改

3、如果在操作的时候也就是for循环里面是需要删除掉这些div，那么不管_divArr是通过