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

打印页面