HTML DOM firstChild 属性
htmlweb developmentfront end technology更新于 2024/5/29 7:40:17
HTML DOM firstChild 属性用于将特定节点的第一个子节点作为节点对象返回。它可以返回文本节点、元素节点或注释节点，具体取决于哪个节点是第一个子节点。这是一个只读属性。
语法
以下是 HTML DOM firstChild 属性的语法 −
node.firstChild
示例
让我们来看一个 firstChild 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<script>
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
}
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html>
输出
这将产生以下输出 −
点击"获取子项"按钮 −
我们创建了一个 <div> 元素，其中包含一个 <p> 元素和一个 <span> 元素。div 元素内部没有空格，因为 firstChild 属性将空格视为文本节点，并会将空格作为第一个子元素。在这种情况下，它将返回 undefined。
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
然后我们创建了 “Get child”按钮，当用户点击时会执行 getFirst() 方法 −
<button onclick="getFirst()">Get Child</button>
getFirst() 方法使用 firstChild 属性获取 div 元素的第一个子元素，在我们的例子中，该属性将返回 <p> 元素。然后，我们使用 innerHTML 属性获取 p 元素内的文本，并将该值赋给变量 ch。然后，通过使用 innerHTML 属性分配所需的文本，将该值显示在 id 为"Sample"的段落中 −
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "The first child node of the div is :"+list;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
