在前端开发中，经常需要获取HTML页面中的某个元素，并对其进行操作。这时候，我们可以用DOM（文档对象模型）来获取页面元素。
获取DOM元素的ID是其中最为基础和常用的操作之一。本篇文章将介绍如何通过JavaScript获取DOM元素的ID，并提供示例代码。
1. getElementById方法
使用document.getElementById(id)方法可以获取指定ID的元素对象。其中，id参数是需要获取的元素ID。
let element = document.getElementById("example");上面的代码会获取ID为"example"的元素，并将其保存在变量element中。
如果页面没有匹配的元素，则该方法返回null。
2. querySelector方法
除了getElementById方法，我们还可以使用querySelector方法来获取元素的ID。该方法使用CSS选择器语法来查找元素，因此可以非常灵活地选择各种元素。
let element = document.querySelector("#example");上面的代码会获取ID为"example"的元素，并将其保存在变量element中。
同样地，如果页面没有匹配的元素，则该方法返回null。
3. 性能考虑
虽然以上两种方法都可以成功获取元素的ID，但是它们的性能略有差异。
getElementById方法是DOM API中的原生方法，因此速度相对较快。而querySelector方法需要先解析CSS选择器，然后再在页面中查找元素，因此速度会稍微慢一些。
如果需要获取的元素ID已知，则建议使用getElementById方法；如果需要根据复杂的选择器语法来获取元素，则可以使用querySelector方法。
4. 示例代码
下面是一个简单的示例代码，演示如何获取DOM元素的ID并进行操作。
HTML代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------- ------ ---- ------------------- ----------- --- ----------------- -- -- ------- -------------- -------- ----------------- ------------ -------- ------------------------- ------- -------
JavaScript代码（保存为script.js）：
-- -------------------- ---- ------- -- ---- --- ------- - ----------------------------------- --- ------- - ----------------------------------- --- ------ - ---------------------------------- -- ------ ----------------- - -------- -- -- ---------- ------------------- - ------ -- ------- -------------------------------- ---------- - -------------- ----------- ---
上面的代码会获取页面中的三个元素，并分别将其保存在变量中。然后，我们对这些元素进行了一些修改和操作，最后添加了一个按钮点击事件的监听器。
结论
获取DOM元素的ID是前端开发中非常基础和常用的操作之一。本文介绍了两种获取元素ID的方法，并提供了示例代码，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24791