HTML - DOM 元素 firstElementChild 属性

firstElementChild 属性提供给定父元素中的第一个子元素，忽略任何文本或注释节点。

语法

element.firstElementChild;

返回值

firstElementChild 属性返回特定父元素的第一个子元素，如果不存在子元素则返回“null”。

HTML DOM 元素“firstElementChild”属性示例

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

访问第一个列表项

此示例演示如何使用 firstELmentChild 属性获取无序列表 (<ul>) 中的第一个<li> 元素。然后显示 <li> 元素的第一个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Accessing the First List Item</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>firstElementChild Property</h2>
    <p>Access and Displays the first child Element..</p>

    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

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

    <script>
        // Accessing the ul element
        const ulEle=document.getElementById('myList');

        //Retrieves the first list item
        const firstListItem = ulEle.firstElementChild;

        // Displaying the text content of the first item
        const outDiv=document.getElementById('output');
        outDiv.textContent = `First list item:
        ${firstListItem.textContent}`;
    </script>
</body>

</html>

访问 Div 的第一个子元素

此示例演示了使用 firstElementChild 属性获取<div> 元素的第一个子元素。代码包含一个按钮，单击该按钮时，将显示 <div> 的第一个子元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Retrieving First Child Element</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>firstElementChild Property</h2>
    <p>Click the button to retrieve the first child 
        element of a <div> element.
    </p>

    <div id="parent">
        <span>Span Element</span>
        <div>Second Div</div>
        <p>Last Paragraph</p>
    </div>
    <hr>
    <button onclick="retrieveFirstChild()">
        Retrieve First Child Element
    </button>
    <div id="output"></div>

    <script>
        function retrieveFirstChild() {
            const pDiv=document.getElementById('parent');
            const fcele = pDiv.firstElementChild;

            // Displaying the tag name of the first child
            const oD = document.getElementById('output');
            oD.textContent=`First child element tag name:
            ${fcele.tagName}`;
        }
    </script>
</body>

</html>

获取表单中的第一个输入字段

此示例演示了如何使用“firstElementChild”属性获取表单中第一个输入元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>First Input Field in a Form</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>firstElementChild Property</h2>
    <p>Click the button to retrieve the 
        first Input field
    </p>

    <form id="myForm">
        <input type="text" placeholder="First name">
        <input type="text" placeholder="Last name">
    </form>

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

    <button onclick="getFirstInput()">
        Get First Input
    </button>

    <script>
        function getFirstInput() {
            var form = document.getElementById("myForm");
            var finp = form.firstElementChild;

            // Displays placeholder of the first input 
            var outdiv=document.getElementById('output');
            outdiv.innerHTML = 
            `<p>First Input Field Placeholder: 
            ${finp.placeholder}</p>`;
        }
    </script>
</body>

</html>

支持的浏览器

属性
firstElementChild	是	是	是	是	是

html_dom_element_reference.htm

打印页面