HTML - DOM firstChild 屬性

HTML DOM 的firstChild 屬性用於訪問和檢索指定父元素的第一個子節點。在 HTML DOM 中，除非與其他節點（元素）進行比較，否則元素不能被視為父節點或子節點。

例如，單個<ul> 元素本身並不是父元素或子元素。但是，當與<li> 元素進行比較時，“ul”被視為父元素，而“li”元素被視為其子元素。

語法

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

element.firstChild;

引數

由於它是一個屬性，因此不接受任何引數。

返回值

此屬性返回給定父元素的第一個子元素。如果不存在第一個子元素，則返回“null”。

示例 1：訪問 Div 元素的第一個子節點

以下程式演示瞭如何使用 HTML DOM 的firstChild 屬性來訪問<div> 元素的第一個子節點：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<h4>Displays the first child Node...</h4>
<div id="parent">
<p>This is the first child node.</p>
<p>This is the second child node.</p>
</div>
<div id="otput"></div> 
<script>
   var parent = document.getElementById("parent");
   var firstChild = parent.firstElementChild;  
   function displayResult() {
      var outputDiv=document.getElementById("otput");
      outputDiv.textContent = "First Child Node: " + firstChild.textContent.trim();
   }
   // Call the function to display the result
   displayResult();
</script>
</body>
</html>

上述程式訪問並返回“div”（即父節點）元素的第一個子節點。

示例 2：處理沒有子節點的情況

以下是 HTML DOM 的firstChild 屬性的另一個示例。我們使用此屬性來檢查元素是否有任何子節點：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<h4>This example does not have any child nodes...</h4>
<div id="pt"></div>
<div id="output"></div>
<script>
   var parent = document.getElementById("pt");
   var firstChild = parent.firstChild;
   var resultMessage;
   if (firstChild === null) {
      resultMessage="The element has no child nodes.";
   } else {
      resultMessage = firstChild.textContent.trim();
   }
   // Function to display result in output div
   function displayResult() {
      var odiv = document.getElementById("output");
      odiv.textContent = resultMessage;
   }
   displayResult();
</script>
</body>
</html>

示例 3：顯示 Body 元素的第一個子節點

此示例顯示了firstChild 屬性的使用。它檢索 body 元素的第一個子節點，這是一個 <p> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM firstChild</title>
</head>
<body>
<p>Displays first child node of body</p>
<h4>Welcome to Tutorialspoint</h4>
<div id="ot"></div>
<script>
   // Selecting the body element
   var bodyElement = document.body;
   // Retrieving and displays the first child node
   var firstChild = bodyElement.firstChild;     
   function displayResult() {
      var otdiv = document.getElementById("ot");
      otdiv.innerHTML = "First Child Node of Body:" + firstChild.nodeName;
   }
   displayResult();
</script>
</body>
</html>

示例 4：獲取 ul 元素的第一個子元素

此示例演示瞭如何使用firstChild 屬性訪問 ID 為“myList”的 <ul> 元素的第一個子節點：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>Retrieving First Child Node HTML</title>
</head>
<body>
<p>Displays HTML content of first child node of "ul" element.</p>
<ul id="myList">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<button onclick="getFirstChild()">Get First Child Node</button>
<div id="ot"></div>
<script>
   function getFirstChild() {
   // Accessing the ul element
   const ul = document.getElementById('myList');
   const firstChildNode = ul.firstChild;
   if(firstChildNode.nodeType === Node.TEXT_NODE){
      const firstChildElement = firstChildNode.nextSibling;
      const otDiv = document.getElementById('ot');
      otDiv.innerHTML = `<p>HTML content of first child node: </p>${firstChildElement.outerHTML}`;
   }
   else{
      const otDiv = document.getElementById('ot');
      otDiv.innerHTML = 'No child node found..!';
   }
  }
</script>
</body>
</html>

支援的瀏覽器

屬性
firstChild	是	是	是	是	是

html_dom_element_reference.htm

列印頁面