HTML | DOM children 属性

HTML | DOM children 属性表示某个元素的所有直接子元素的集合，以数组的形式返回。在这个集合中，每个子元素都是一个对象，可以使用 JavaScript 操作这些子元素。

const elemChildren = element.children;

语法

element.children

返回值

当前元素的所有直接子元素的集合，以数组的形式返回。

注意事项

• children 属性只会包含标签元素，文本和注释节点不算在内。
• 返回的集合是一个动态的对象，在增加或删除子元素时会自动更新。
• 该属性只返回当前元素的直接子元素，而不会返回所有嵌套的子元素。

示例

HTML 代码

<div id="parent">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <div>
    <p>paragraph 3</p>
  </div>
</div>

JavaScript 代码

const parent = document.getElementById("parent");
const children = parent.children;

console.log(children.length); // 2
console.log(children[0].tagName); // "P"

结论

HTML | DOM children 属性非常有用，它可以让我们轻松地访问元素的子元素，并对它们进行操作。需要注意的是，它只提供当前元素的直接子元素，并且不包括文本和注释节点。