在前端开发中，经常需要获取HTML页面中的某个元素，并对其进行操作。这时候，我们可以用DOM（文档对象模型）来获取页面元素。
获取DOM元素的ID是其中最为基础和常用的操作之一。本篇文章将介绍如何通过JavaScript获取DOM元素的ID，并提供示例代码。
1. getElementById方法
使用document.getElementById(id)方法可以获取指定ID的元素对象。其中，id参数是需要获取的元素ID。
--- ------- - -----------------------------------
上面的代码会获取ID为"example"的元素，并将其保存在变量element中。
如果页面没有匹配的元素，则该方法返回null。
2. querySelector方法
除了getElementById方法，我们还可以使用querySelector方法来获取元素的ID。该方法使用CSS选择器语法来查找元素，因此可以非常灵活地选择各种元素。
--- ------- - -----------------------------------
上面的代码会获取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