JavaScript如何获取元素和节点

发布时间：2022-05-17 09:47:23 作者：iii
来源：亿速云阅读：241

# JavaScript如何获取元素和节点

在JavaScript中，获取DOM元素和节点是前端开发中的基本操作之一。通过获取元素和节点，我们可以对其进行操作、修改样式、添加事件监听器等。本文将介绍几种常见的获取元素和节点的方法。

## 1. 通过ID获取元素

使用`document.getElementById()`方法可以通过元素的ID获取对应的DOM元素。ID在HTML文档中应该是唯一的。

```javascript
const element = document.getElementById('myElementId');

2. 通过类名获取元素

使用document.getElementsByClassName()方法可以通过类名获取一组元素。返回的是一个HTMLCollection，类似于数组，但不是真正的数组。

const elements = document.getElementsByClassName('myClassName');

3. 通过标签名获取元素

使用document.getElementsByTagName()方法可以通过标签名获取一组元素。返回的也是一个HTMLCollection。

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

4. 通过CSS选择器获取元素

使用document.querySelector()方法可以通过CSS选择器获取第一个匹配的元素。如果选择器匹配多个元素，只返回第一个。

const element = document.querySelector('.myClassName');

使用document.querySelectorAll()方法可以通过CSS选择器获取所有匹配的元素。返回的是一个NodeList，类似于数组，但不是真正的数组。

const elements = document.querySelectorAll('.myClassName');

5. 获取子节点和父节点

获取子节点

使用element.childNodes属性可以获取元素的所有子节点，包括文本节点和元素节点。

const childNodes = element.childNodes;

使用element.children属性可以获取元素的所有子元素节点，不包括文本节点。

const children = element.children;

获取父节点

使用element.parentNode属性可以获取元素的父节点。

const parentNode = element.parentNode;

6. 获取兄弟节点

获取前一个兄弟节点

使用element.previousSibling属性可以获取元素的前一个兄弟节点，包括文本节点。

const previousSibling = element.previousSibling;

使用element.previousElementSibling属性可以获取元素的前一个兄弟元素节点，不包括文本节点。

const previousElementSibling = element.previousElementSibling;

获取后一个兄弟节点

使用element.nextSibling属性可以获取元素的后一个兄弟节点，包括文本节点。

const nextSibling = element.nextSibling;

使用element.nextElementSibling属性可以获取元素的后一个兄弟元素节点，不包括文本节点。

const nextElementSibling = element.nextElementSibling;

7. 获取特定类型的节点

获取文本节点

使用element.firstChild和element.lastChild可以获取元素的第一个和最后一个子节点，可能是文本节点或元素节点。

const firstChild = element.firstChild;
const lastChild = element.lastChild;

获取元素节点

使用element.firstElementChild和element.lastElementChild可以获取元素的第一个和最后一个子元素节点。

const firstElementChild = element.firstElementChild;
const lastElementChild = element.lastElementChild;

8. 获取文档根节点

使用document.documentElement可以获取文档的根节点，通常是<html>元素。

const rootElement = document.documentElement;

9. 获取文档的body节点

使用document.body可以获取文档的<body>元素。

const bodyElement = document.body;

10. 获取文档的head节点

使用document.head可以获取文档的<head>元素。

const headElement = document.head;

总结

JavaScript提供了多种方法来获取DOM元素和节点，开发者可以根据具体的需求选择合适的方法。掌握这些方法对于前端开发至关重要，能够帮助我们更高效地操作和修改页面内容。

”`