JavaScript getElementsByClassName() 与 getElementById() 方法

JavaScript中的DOM（Document Object Model）提供了许多方法来访问文档元素以及操作文档中的内容。其中比较常用的便是getElementsByClassName()和getElementById()方法。这两个方法都是用来获取文档中的元素，但使用场景和获取方式有所不同。

getElementById() 方法

getElementById()是用来根据元素的id属性获取元素的方法。它只能用于获取单个元素，因为一个文档中的id属性必须是唯一的。调用该方法需要先选定文档区域，可以是document或一个DOM元素，然后以方法名后跟一个字符串参数作为元素的id属性值来调用该方法。如果找到了相应的元素，该方法将返回该元素的引用，否则返回null。

// 获取id为"myDiv"的元素
var myDiv = document.getElementById("myDiv");

getElementsByClassName() 方法

getElementsByClassName()是用来根据元素的类名获取元素的方法。它可以用于获取多个元素，因为同一个文档中可以有多个元素具有相同的类名。调用该方法需要先选定文档区域，可以是document或一个DOM元素，然后以方法名后跟一个字符串参数作为元素的类名来调用该方法。如果找到了相应的元素，该方法将返回一个NodeList对象，其中包含了所有具有给定类名的元素，否则返回一个空的NodeList对象。

// 获取所有类名为"myClass"的元素
var myElements = document.getElementsByClassName("myClass");
// 遍历获取到的元素
for (var i = 0; i < myElements.length; i++) {
    // 对每一个元素进行操作
    myElements[i].style.color = "red";
}

需要注意的是，NodeList对象是一个伪数组（类数组），它不支持常规的数组操作方法，如push()、pop()、slice()等。但可以通过遍历该对象来访问其中的元素。如果需要对NodeList对象进行常规数组操作，可以先将其转化为真正的数组，如：

// 将NodeList对象转换为真正的数组
var myArray = Array.prototype.slice.call(myList);

到此为止，我们已经了解了JavaScript中的getElementsByClassName()和getElementById()方法的基本用法及注意事项，希望能对你有所帮助。