JavaScript更改class和id的方法

当我们需要在JavaScript中更改class和id时，需要使用getElementById和getElementsByClassName这两个方法。这两个方法返回的是DOM对象或节点列表。

当我们需要在JavaScript中更改class和id时，需要使用getElementById和getElementsByClassName这两个方法。这两个方法返回的是DOM对象或节点列表。

更改id

更改id的方法非常简单，只需要使用getElementById方法来获取该元素，然后通过修改其id属性实现。

示例1：更改id为"newId"的元素的id为"updatedId"

var element = document.getElementById("newId");
element.id = "updatedId";

示例2：通过循环更改多个元素的id

var elements = document.getElementsByClassName("oldClass");
for (var i = 0; i < elements.length; i++) {
  elements[i].id = "newId" + i;
}

更改class

更改class的方法比更改id稍微复杂一些，需要先使用getElementsByClassName方法获取所有需要修改的元素，然后再逐个修改每个元素的class。

示例1：将class为"oldClass"的元素的class改为"newClass"

var elements = document.getElementsByClassName("oldClass");
for (var i = 0; i < elements.length; i++) {
  elements[i].className = "newClass";
}

示例2：将class为"oldClass"的元素的class添加"newClass"

var elements = document.getElementsByClassName("oldClass");
for (var i = 0; i < elements.length; i++) {
  elements[i].className += " newClass";
}

值得注意的是，如果一个元素已经有了class，使用className = "newClass"会将原有的class覆盖掉。如果要添加新的class，需要使用className += " newClass"。