js获取dom元素的子元素,父元素,兄弟元素

封面图 • 2026-01-16 • JavaScript

在 JavaScript 中，你可以使用多种方法来获取 DOM 元素的 **子元素、父元素和兄弟元素**。以下是一些常用的方法：

---

## 一、获取子元素（Child Elements）

### 1. `element.children`
返回一个 **HTMLCollection**，包含所有**子元素节点**（不包括文本节点）。

```javascript
const parent = document.getElementById('parent');
const children = parent.children; // 获取所有子元素
```

### 2. `element.childNodes`
返回一个 **NodeList**，包含所有子节点（包括文本节点、注释节点等）。

```javascript
const parent = document.getElementById('parent');
const nodes = parent.childNodes; // 包含所有子节点
```

### 3. `element.firstElementChild` / `element.lastElementChild`
获取第一个/最后一个**子元素节点**。

```javascript
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;
```

---

## 二、获取父元素（Parent Element）

### 1. `element.parentElement`
返回当前元素的**直接父元素**（不包括 DocumentFragment 等）。

```javascript
const child = document.getElementById('child');
const parent = child.parentElement;
```

---

## 三、获取兄弟元素（Sibling Elements）

### 1. `element.previousElementSibling` / `element.nextElementSibling`
获取前一个/后一个**同级元素节点**（不包括文本节点）。

```javascript
const sibling = element.previousElementSibling; // 前一个兄弟元素
const nextSibling = element.nextElementSibling; // 后一个兄弟元素
```

### 2. `element.previousSibling` / `element.nextSibling`
获取前一个/后一个**同级节点**（包括文本节点、注释节点等）。

```javascript
const node = element.previousSibling; // 前一个节点（可能不是元素）
```

---

## 四、示例代码

```html
<div id="parent">
  <div id="child1">Child 1</div>
  <div id="child2">Child 2</div>
  <span>Text Node</span>
</div>
```

```javascript
const parent = document.getElementById('parent');

// 获取子元素
console.log(parent.children); // HTMLCollection

// 获取父元素
const child = document.getElementById('child1');
console.log(child.parentElement); // #parent

// 获取兄弟元素
const sibling = document.getElementById('child1').nextElementSibling;
console.log(sibling); // #child2
```

---

## 五、总结

| 方法 | 说明 |
|------|------|
| `element.children` | 获取所有子元素（HTMLCollection） |
| `element.childNodes` | 获取所有子节点（NodeList） |
| `element.parentElement` | 获取父元素 |
| `element.previousElementSibling` | 获取前一个兄弟元素 |
| `element.nextElementSibling` | 获取后一个兄弟元素 |

如果你需要处理复杂的 DOM 操作，也可以使用 `querySelector` 或 `querySelectorAll` 来选择特定的子元素或兄弟元素。

如需进一步帮助，请告诉我你的具体需求！