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

列印頁面