`document.getElementByClass` 不是功能

在前端开发中，我们通常使用 document.getElementById() 来获取一个页面元素，并对其进行操作。但是，在某些情况下，我们需要根据类名来选择多个元素。在这种情况下，很容易想到使用 document.getElementByClass() 方法来完成任务。然而，这个方法实际上不存在！正确的方法是使用 document.getElementsByClassName()。

document.getElementByClass 为什么不存在？

在 HTML 中，每个元素可以包含多个类名。例如：

<div class="box red"></div>

在这个例子中，<div> 元素同时属于两个类名：box 和 red。因此，如果 document.getElementByClass() 存在，它应该返回所有具有指定类名的元素集合。然而，在设计 DOM API 时，W3C 工作组认为这种方法不符合语言的简洁性和一致性，因此没有将其纳入标准中。

正确的方法：document.getElementsByClassName()

与 document.getElementById() 类似，document.getElementsByClassName() 方法返回一个元素集合，其中包含具有指定类名的所有元素。以下是使用 document.getElementsByClassName() 方法选择所有具有 .box 类名的元素的示例代码：

const boxes = document.getElementsByClassName('box');
for (let i = 0; i < boxes.length; i++) {
  boxes[i].style.backgroundColor = 'red';
}

在这个示例代码中，我们首先获取所有具有 .box 类名的元素，并将其保存在一个名为 boxes 的变量中。然后，我们使用循环遍历 boxes 集合，并将每个元素的背景颜色设置为红色。

结论

虽然 document.getElementByClass() 并不存在，但理解如何正确选择具有相同类名的多个元素对于前端开发人员来说是非常重要的。使用 document.getElementsByClassName() 方法可以轻松地完成此操作，同时也可以提高代码的简洁性和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11215