JavaScript获取DOM元素的11种方法总结

在前端开发中，DOM (Document Object Model)元素的获取是必不可少的一部分。JavaScript提供了各种方式来获取DOM元素，本文将介绍11种常见的方法，并提供相关示例代码。

1. getElementById()

getElementById()方法通过元素ID获取单个元素。它是最快的方法之一，因为ID是唯一的。

const element = document.getElementById("myId");

2. querySelector()

querySelector()方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配的元素，则返回 null。

const element = document.querySelector("#myId .myClass");

3. querySelectorAll()

querySelectorAll()方法返回包含所有与指定CSS选择器匹配的元素的静态 NodeList。

const elements = document.querySelectorAll(".myClass");

4. getElementsByClassName()

getElementsByClassName()方法返回包含指定类名的所有元素的 HTMLCollection 对象。这是动态的集合，如果更改了文档，则该集合也会随之更改。

const elements = document.getElementsByClassName("myClass");

5. getElementsByTagName()

getElementsByTagName()方法返回包含指定标签名称的所有元素的 HTMLCollection。

const elements = document.getElementsByTagName("div");

6. getElementsByName()

getElementsByName()方法通过name属性返回所有匹配指定名称的元素。这通常用于表单元素。

const elements = document.getElementsByName("myName");

7. getElementsBySelector()

getElementsBySelector()方法通过一个选择器字符串返回所有匹配的元素。这是非标准方法，不推荐使用。

const elements = document.getElementsBySelector(".myClass li");

8. parentNode

通过 parentNode 属性可以访问当前元素的父级元素。

const parentElement = element.parentNode;

9. previousSibling 和 nextSibling

previousSibling 和 nextSibling 属性分别可以访问前一个和后一个同级元素。

const previousElement = element.previousSibling;
const nextElement = element.nextSibling;

10. firstChild 和 lastChild

firstChild 和 lastChild 属性分别返回第一个和最后一个子元素。

const firstElement = element.firstChild;
const lastElement = element.lastChild;

11. children

children 属性返回包含指定元素的所有子元素的 HTMLCollection 对象。

const childElements = element.children;

总结：以上是JavaScript获取DOM元素的11种方法，每个方法都有其适用场景和优缺点，开发者应根据实际情况进行选择和使用。

希望本文对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2776