HTML - DOM 元素 lastElementChild 屬性

**lastElementChild** 屬性返回選定父元素的子元素中的最後一個子元素。

語法

element.lastElementChild;

返回值

此 lastElementChild 屬性返回一個節點，該節點儲存父元素的最後一個子元素。如果不存在最後一個子元素，則返回“null”。

HTML DOM 元素“lastElementChild”屬性的示例

以下是一些示例，用於更好地理解“lastElementChild”屬性的使用。

獲取 Div 元素的最後一個子元素

此示例幫助我們瞭解如何使用 lastElementChild 屬性來獲取**<div>** 元素的最後一個子元素。以下程式碼包含一個按鈕，單擊該按鈕時，將顯示 <div> 元素的最後一個子元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Getting Last Child</title>     
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>lastElementChild Property</h2>
    <p>Contents of Div Elements are:</p>
    
    <div class="box" id="parent">
        <div>First paragraph</div>
        <div>Second div</div>
        <span>Span element</span>        
    </div>
    <hr>
    <div id="output"></div>

    <script> 
        const parentDiv = document.getElementById('parent');
        // Retrieving the last child element
        const lastele = parentDiv.lastElementChild;
        // Displaying the last child element
        const outputDiv = document.getElementById('output');
        outputDiv.textContent = `Last child element: 
        ${lastele.tagName}`;
    </script>
</body>

</html>

ul 元素的最後一個子節點

此示例演示瞭如何使用 lastChild 屬性獲取**<ul>** 元素的最後一個子元素。以下程式碼選擇 id 為“myList”的 <ul> 元素，從而能夠檢索和顯示最後一個子元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        ul { 
            padding: 0;
        }
        li { 
            border-bottom: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>lastChild Property</h2>
    <h4>Below are List of ul items :</h4>
    <ul id="myList">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>DSA</li>
    </ul>

    <button onclick="showLastChild()">
        Get the last child
    </button>
    <div id="output"></div>

    <script>
        function showLastChild() {
            // Selecting the ul element
            const myList = document.getElementById('myList'); 
                
            // Displaying the last child content
            const outputDiv = document.getElementById('output');
            outputDiv.textContent = `Last child: 
            ${myList.lastElementChild.textContent}`;
        }
    </script>
</body>

</html>

檢索選定 div 元素的最後一個子元素

此示例幫助我們瞭解如何使用 lastChild 屬性來獲取 <div> 元素的最後一個子元素。以下程式碼訪問並顯示 <div> 元素的最後一項。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>       
        .item {
            margin-bottom: 10px;         
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>lastElementChild Property</h2>
    <p>Getting the last child element of div element...</p>
    
    <div class="container" id="pt">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        
    </div>

    <div id="ot"></div>

    <script> 
        const pdiv=document.getElementById('pt');

        // Retrieving  and displaying the last child element
        const lele = pdiv.lastElementChild;
        // Displaying the last child element
        const otdiv = document.getElementById('ot');
        otdiv.textContent = `Last child element: 
        ${lele.textContent}`;
    </script>
</body>

</html>

支援的瀏覽器

屬性
lastElementChild	是	是	是	是	是

html_dom_element_reference.htm

列印頁面