JavaScript 通过 ID 和 Class 获取元素

概述

在前端开发中，我们经常需要获取 HTML 文档中的元素节点，可以通过 JavaScript 来实现。一般情况下，获取元素的方式有两种：通过 ID 和通过 Class。

通过 ID 获取元素

通过 ID 获取元素非常常见，可以使用 JavaScript 中的 getElementById() 方法来实现。该方法接收一个字符串参数，表示想要获取的元素的 ID 值，并且返回该 ID 对应的元素节点。

const elem = document.getElementById('my-id');

当然，要获取的元素必须存在于当前文档中，否则该方法会返回 null。

通过 Class 获取元素

通过 Class 获取元素相比通过 ID 获取元素稍微麻烦一些，但是它可以获取多个元素，因为一个 class 可以同时被多个元素所拥有。可以使用 JavaScript 中的 getElementsByClassName() 方法来实现。该方法接收一个字符串参数，表示想要获取的元素的 Class 值，并且返回一个类数组对象，其中每个元素都是一个对应的元素节点。

const elems = document.getElementsByClassName('my-class');

需要注意的是，该方法返回的是一个类数组对象，不是一个真正的数组，所以不能使用数组方法。但是可以通过类似数组的遍历方法来访问其中的元素节点。

结论

通过 ID 和 Class 获取元素是在前端开发中非常基础也非常常见的操作。本文中介绍了如何通过 JavaScript 来实现这两种操作，分别使用了 getElementById() 和 getElementsByClassName() 方法。掌握这两种方法可以帮助我们更加方便地操作文档中的元素，为后续的 DOM 操作奠定基础。