在前端开发中，DOM (Document Object Model)元素的获取是必不可少的一部分。JavaScript提供了各种方式来获取DOM元素，本文将介绍11种常见的方法，并提供相关示例代码。
1. getElementById()
getElementById()方法通过元素ID获取单个元素。它是最快的方法之一，因为ID是唯一的。
----- ------- - --------------------------------
2. querySelector()
querySelector()方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配的元素，则返回 null。
----- ------- - ----------------------------- -----------
3. querySelectorAll()
querySelectorAll()方法返回包含所有与指定CSS选择器匹配的元素的静态 NodeList。
----- -------- - --------------------------------------
4. getElementsByClassName()
getElementsByClassName()方法返回包含指定类名的所有元素的 HTMLCollection 对象。这是动态的集合，如果更改了文档，则该集合也会随之更改。
----- -------- - -------------------------------------------
5. getElementsByTagName()
getElementsByTagName()方法返回包含指定标签名称的所有元素的 HTMLCollection。
----- -------- - -------------------------------------
6. getElementsByName()
getElementsByName()方法通过name属性返回所有匹配指定名称的元素。这通常用于表单元素。
----- -------- - -------------------------------------
7. getElementsBySelector()
getElementsBySelector()方法通过一个选择器字符串返回所有匹配的元素。这是非标准方法，不推荐使用。
----- -------- - ---------------------------------------- -----
8. parentNode
通过 parentNode 属性可以访问当前元素的父级元素。
----- ------------- - -------------------
9. previousSibling 和 nextSibling
previousSibling 和 nextSibling 属性分别可以访问前一个和后一个同级元素。
----- --------------- - ------------------------ ----- ----------- - --------------------
10. firstChild 和 lastChild
firstChild 和 lastChild 属性分别返回第一个和最后一个子元素。
----- ------------ - ------------------- ----- ----------- - ------------------
11. children
children 属性返回包含指定元素的所有子元素的 HTMLCollection 对象。
----- ------------- - -----------------
总结：以上是JavaScript获取DOM元素的11种方法，每个方法都有其适用场景和优缺点，开发者应根据实际情况进行选择和使用。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/2776