HTML DOM children 属性

children 属性的基本用法

children 属性是一个只读属性，返回一个包含指定元素所有子元素的 HTMLCollection 对象。这个 HTMLCollection 对象是一个类数组对象，它包含了指定元素的所有子元素，但不包含文本节点和注释节点。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Children Property Example</title>
</head>
<body>
    <div id="parent">
        <p>Child 1</p>
        <p>Child 2</p>
        <p>Child 3</p>
    </div>

    <script>
        var parent = document.getElementById('parent');
        var children = parent.children;

        for (var i = 0; i < children.length; i++) {
            console.log(children[i].textContent);
        }
    </script>
</body>
</html>

在上面的示例中，我们首先获取了 id 为 parent 的元素，然后通过 children 属性获取了所有子元素，并使用 for 循环遍历输出了每个子元素的文本内容。

children 属性与 childNodes 属性的区别

children 属性与 childNodes 属性有所不同。childNodes 属性返回的是一个包含所有子节点（包括文本节点和注释节点）的 NodeList 对象，而 children 属性只返回元素节点。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Children vs childNodes</title>
</head>
<body>
    <div id="parent">
        <p>Child 1</p>
        <!-- This is a comment -->
        <p>Child 2</p>
        <p>Child 3</p>
    </div>

    <script>
        var parent = document.getElementById('parent');
        var children = parent.children;
        var childNodes = parent.childNodes;

        console.log(children.length); // Output: 3
        console.log(childNodes.length); // Output: 5
    </script>
</body>
</html>

在上面的示例中，我们可以看到 children 属性返回的长度是 3，而 childNodes 属性返回的长度是 5，因为 childNodes 包括了文本节点和注释节点。

遍历 children 属性

我们可以通过 for...of 循环或者 forEach 方法来遍历 children 属性返回的 HTMLCollection 对象。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Traversing Children</title>
</head>
<body>
    <div id="parent">
        <p>Child 1</p>
        <p>Child 2</p>
        <p>Child 3</p>
    </div>

    <script>
        var parent = document.getElementById('parent');
        var children = parent.children;

        // Using for...of loop
        for (var child of children) {
            console.log(child.textContent);
        }

        // Using forEach method
        Array.from(children).forEach(function(child) {
            console.log(child.textContent);
        });
    </script>
</body>
</html>

在上面的示例中，我们展示了两种遍历 children 属性的方法，分别是使用 for...of 循环和 forEach 方法。

总结

通过本文的介绍，我们了解了 HTML DOM 中 children 属性的基本用法、与 childNodes 属性的区别以及如何遍历 children 属性返回的 HTMLCollection 对象。在实际开发中，children 属性是非常实用的，可以帮助我们快速获取和操作指定元素的子元素。希望本文对你有所帮助！