HTML - DOM 元素 children 属性

元素的 **children** 属性返回其子元素的集合，表示为一个 HTMLCollection 对象，不包括文本节点和其他非元素节点。

语法

element.children;

返回值

children 属性返回一个 HTMLCollection 对象，其中包含父元素的子元素集合。

HTML DOM 元素 'children' 属性示例

以下是一些示例，展示了 'children' 属性的使用，以便更好地理解。

检索 Div 元素的子元素

此示例演示如何使用 children 属性检索 ID 为 "pE" 的 **<div>** 元素的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Children Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>children Property</h2>
    <p>It retrieves child elements of the parent ...</p>
    
    <div id="parent">
        <p>Child 1</p>
        <p>Child 2</p>
        <p>Child 3</p>
    </div>

    <div id="output"></div>

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

        // Displaying child elements in the output div
        let res="<p><strong>Child Elements:</strong></p>";
        for (let i = 0; i < children.length; i++) {
            res += `<p>${children[i].textContent}</p>`;
        }
        document.getElementById('output').innerHTML=res;
    </script>
</body>

</html>

计算 Div 元素的子元素数量

此示例演示了 children 属性的基本用法，用于计算并显示 **<div>** 元素中子元素的数量。

<!DOCTYPE html>
<html>
<head>
    <title>Count Children Example</title>
</head>

<body>
    <h2>HTML - DOM Element</h2>
    <h1>children Property</h1>
    <p>Displays the number of childrens...</p>

    <div id="myDIV">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>

    <button onclick="countChildren()">
        Count Children
    </button>

    <div class="output">
        <p>Number of children:<span id="Cc">-</span></p>
    </div>

    <script>
        function countChildren() {
            let myDiv = document.getElementById("myDIV");
            let childC = myDiv.children.length;
            document.getElementById("Cc").textContent = childC;
        }
    </script>
</body>

</html>

更改子元素的背景颜色

此示例演示如何使用 parent.children 属性动态更改 <div> 内所有子元素的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head> 
<title>Change Children Background Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>children Property</h2>
    <p>It Changes background colour for the Children</p>
    
    <div id="pt">
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
    </div>
    
    <button onclick="changeChildrenBackground()">
        Change Children Background
    </button>
    
    <script>
        function changeChildrenBackground() {
            const parentDiv=document.getElementById('pt');
            const children = parentDiv.children;
        
            for (let i = 0; i < children.length; i++) {
            const child = children[i];
            child.style.backgroundColor = '#ff80f0';  
            }
        }
    </script>
</body>

</html>

检索选择框中第三个子元素的文本

此示例有效地展示了如何使用 children 属性与下拉菜单交互并根据其索引检索特定元素的内容。它显示第三个子元素的文本。

<!DOCTYPE html>
<html lang="en">
<head> 
<title>Get Text of Third Child Element in Select</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>children Property</h2>
    <p>Get Text of Third Child Element in Select</p>
    
    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    
    <button onclick="getThirdChild()">
        Get Text of Third Child
    </button>
    
    <p id="result"></p>
    
    <script>
        function getThirdChild() {
            const s=document.getElementById('mySelect');  
            const thirdText=s.options[2].textContent;
            document.getElementById('result').textContent=
            `Text of third child element: ${thirdText}`;
        
        }
    </script>
</body>

</html>

更改第二个子元素的背景

此示例演示了如何使用 children 属性动态更改 <div> 元素中第二个子元素的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Changes Background for Second Child</title>
    <style>
        .child {
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <h2>Change Background of Second Child Element</h2>
    
    <div id="myDIV">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
        <div class="child">Child 3</div>
    </div>
    
    <button onclick="changeBackground()">
        Change Background of Second Child
    </button>
    
    <script>
        function changeBackground() {
            const pdiv = document.getElementById('myDIV');
            // Index 1 for the second child element
            const secondChild = pdiv.children[1]; 
            pdiv.children[1].style.backgroundColor='violet'; 
            
        }
    </script>

</body>

</html>

支持的浏览器

属性
children	是	是	是	是	是

html_dom_element_reference.htm

打印页面