HTML - DOM lastChild 屬性

HTML DOM 的lastChild 屬性用於訪問和檢索 HTML DOM 中指定父元素的最後一個子節點。

此屬性對於操作 DOM 很有用，因為它允許開發人員輕鬆識別和互動最後一個子節點，無論它是元素節點、文字節點還是註釋。

如果父元素沒有子元素，則 lastChild 將返回null。

語法

以下是 HTML DOM lastChild 屬性的語法：

element.lastChild;

引數

因為它是一個屬性，所以它不接受任何引數。

返回值

此屬性返回一個指向特定父元素的最後一個子節點的節點。如果不存在最後一個子節點，則返回“null”。

示例 1：訪問 Div 元素的 lastChild

以下是 HTML DOM lastChild 屬性的基本示例。它檢索<div> 元素的最後一個子元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
</head>
<body>
<div id="parent">           
<span>First Span element</span>
<div>Second div</div>
<p>Last paragraph</p>    
</div>
<p>Click the below button to get the last child of div element.</p>
<button onclick="showLastChild()">Click me</button>
<div id="output"></div>
<script>
   function showLastChild() {
      // Selecting the parent div
      const parentDiv = document.getElementById('parent');
      // Retrieving the last child node
      const lastChildNode = parentDiv.lastElementChild;
      // Displaying the result
      const outputDiv = document.getElementById('output');
      outputDiv.innerHTML = `Last child node: ${lastChildNode.textContent}`;
  }
</script>
</body>
</html>

上面的程式返回“div”元素的最後一個子元素。

示例 2：“ul”元素的最後一個子節點

以下是 HTML DOM lastChild 元素的另一個示例。我們使用此屬性來訪問<ul> 元素的最後一個子元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
<style> 
   ul { 
       padding: 0;
   }
   li { 
       border-bottom: 1px solid #ccc;
       padding: 5px;
   }
</style>
</head>
<body>
<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>

示例 3：修改 Div 元素的最後一個子元素內容

此示例演示如何使用lastChild 屬性動態修改 <div> 元素的最後一個子元素的內容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
</head>
<body>
<h4>This is the div content with their child nodes:</h4>
<div id="parent">
<p>First paragraph</p>
<div>Second div</div>
<span>Span element</span>
<p>Last paragraph</p>
</div>
<h3>Modified last child node:</h3>
<div id="output"></div>
<script>
   // Selecting the parent div
   const parentDiv = document.getElementById('parent');
   // Accessing and modifying the last child node
   const lastChildNode = parentDiv.lastChild;     
   // Displaying the updated content
   const outputDiv = document.getElementById('output');
   outputDiv.textContent = `Updated child node is: ${'Modified last paragraph'}.`;
</script>
</body>
</html>

示例 4：動態插入最後一個子元素

下面的示例演示瞭如何使用lastChild 屬性在單擊按鈕時將新的最後一個子元素動態插入專案列表中：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM lastChild</title>
<style> 
   .container {
      border: 1px solid #ccc; 
   }
   .highlight {
      background-color: #ffffcc;
      font-weight: bold;
   }
</style>
</head>
<body>
<p>Inserting a new Last Child dynamically..</p>
<div id="pt" class="container">
<p>First paragraph</p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<span>Span element</span>
<p>Last paragraph with some whitespace before closing tag</p>
</div>
<div class="container">
<button onclick="insertLastChild()">Insert Last Child</button></div>
<script>
   // Function to insert a new last child element
   function insertLastChild() {
      const pDiv = document.getElementById('pt');
      const lastChild = pDiv.lastChild;
      // Create a new element
      const newElement = document.createElement('p');
      newElement.textContent = 'New last child paragraph';
      // Insert the new element as the last child
      pDiv.insertBefore(newElement, lastChild.nextSibling);
      newElement.classList.add('highlight');
   }
</script>
</body>
</html>

支援的瀏覽器

屬性
lastChild	是	是	是	是	是

html_dom_element_reference.htm

列印頁面