JS 中的 children 属性|极客笔记

JS 中的 children 属性

1. 引言

在进行前端开发时，我们经常需要与 DOM 元素进行交互，动态地操作页面中的元素。其中，一个常见的需求是获取元素的子元素，以及对子元素进行增、删、改等操作。而在 JavaScript 中，我们可以通过使用 children 属性来实现对元素子元素的操作。

本文将详细介绍 children 属性的基本用法、常用方法、注意事项等内容，并提供一些示例代码帮助读者更好地理解和应用该属性。

2. `children` 属性的基本用法

在 JavaScript 中，每个 DOM 元素都有一个 children 属性，用于获取该元素的所有子元素节点。该属性返回一个 HTMLCollection 对象，而不是一个真正的数组，所以并不支持数组的所有方法。

以下是使用 children 属性的基本语法：

element.children

其中，element 表示要获取子元素的父元素，可以是一个 DOM 对象或通过相关方法获取到的 DOM 对象。

下面是一个简单的示例，演示了如何使用 children 属性来获取一个元素的所有子元素节点：

<div id="parent">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

<script>
  const parent = document.getElementById("parent");
  const children = parent.children;
  console.log(children);
</script>

运行以上示例代码，可以在控制台中看到以下输出：

HTMLCollection(3) [div, div, div]

从结果中可以看出，children 属性返回了一个包含三个子元素 <div> 的 HTMLCollection 对象。

3. `children` 属性的常用方法

3.1. `length` 属性

children 属性返回的 HTMLCollection 对象具有 length 属性，用于获取该 HTMLCollection 中子元素的个数。

以下是使用 length 属性的示例代码：

console.log(children.length);

3.2. `item()` 方法

item() 方法可以用于通过索引值获取 HTMLCollection 中的某个子元素。

以下是使用 item() 方法的示例代码：

const firstChild = children.item(0);
console.log(firstChild);

3.3. 使用下标访问子元素

HTMLCollection 对象实现了类似数组的下标访问方式，因此可以通过下标直接访问 HTMLCollection 中的某个子元素。

以下是使用下标访问子元素的示例代码：

const secondChild = children[1];
console.log(secondChild);

4. 注意事项

4.1. `HTMLCollection` 的实时性

children 属性返回的 HTMLCollection 对象是实时的，即当页面的 DOM 结构发生改变时，HTMLCollection 会自动更新以反映最新的子元素。

以下是一个示例，演示了在运行过程中添加新的子元素后，HTMLCollection 对象会被自动更新：

<div id="parent"></div>

<script>
  const parent = document.getElementById("parent");
  const children = parent.children;

  console.log(children.length); // 输出结果：0

  const newChild = document.createElement("div");
  parent.appendChild(newChild);

  console.log(children.length); // 输出结果：1
</script>