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

打印页面