在前端开发中，经常需要操作DOM元素来实现页面的动态效果。而要操作DOM元素，首先需要获取到这些元素。本文将介绍如何通过类和ID来获取DOM元素，并提供示例代码以便更好地理解。
按类获取元素
按类来获取元素是一种常见的方式。在HTML中，通过给某个元素设置class属性，就可以让这个元素拥有一个类名。如果想获取拥有特定类名的所有元素，可以使用document.getElementsByClassName()方法。
// 获取所有类名为"example"的元素
const elements = document.getElementsByClassName("example");这样就可以获取页面上所有类名为"example"的元素了。需要注意的是，返回值是一个类数组对象，即使只有一个匹配元素也是如此。因此，如果只想获取第一个匹配元素，可以使用下标方式来获取：
// 获取第一个类名为"example"的元素
const element = document.getElementsByClassName("example")[0];另外，如果只想获取特定父元素下面的匹配元素，可以在父元素上调用getElementsByClassName()。
<div id="parent"> <div class="example">Example 1</div> <div class="example">Example 2</div> </div>
// 获取id为"parent"的元素下面所有类名为"example"的子元素
const elements = document.getElementById("parent").getElementsByClassName("example");按ID获取元素
按ID来获取元素是最常见的方式。在HTML中，通过给某个元素设置id属性，就可以让这个元素拥有一个唯一的ID。如果想获取特定ID的元素，可以使用document.getElementById()方法。
<div id="example">Example</div>
// 获取id为"example"的元素
const element = document.getElementById("example");需要注意的是，返回值是一个元素对象，而不是类数组对象。因此，无需使用下标方式来获取。
总结
上述代码演示了如何通过类和ID来获取DOM元素，这是前端开发中非常基础的操作。需要注意的是，返回值可能是一个类数组对象或者一个元素对象，具体情况需要根据API文档来确定。同时，获取到元素之后，还可以进一步操作它们以实现各种动态效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12593