HTML DOM children 属性

htmlweb developmentfront end technology更新于 2024/6/2 1:48:17

HTML DOM children 属性用于以 HTML 集合的形式返回指定元素的所有子元素。它是一个只读属性。获取的元素可以通过从 0 开始的索引号进行访问。

元素的显示顺序与它们在 HTML 文档中的顺序相同。它只包含子节点，不包含类似 childNodes 属性的空格和注释。

语法

以下是 children 属性的语法 −

element.children

让我们看一个 HTML DOM children 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</p>
<button onclick="myChild()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element </p>
</div>
<p id="Sample"></p>
<script>
   function myChild() {
      var x = document.getElementById("DIV1").children.length;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击 COUNT 按钮时 −

在上面的例子中 −

我们创建了一个

元素，其 ID 为"DIV1"，其中包含两个段落。我们添加了彩色边框和一些边距，以将其与其他元素区分开来 −

div {
   border: 1px solid blue;
   margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>

然后，我们创建了一个 COUNT 按钮，当用户点击该按钮时，它将执行 myChild() 函数 −

<button onclick="myChild()">COUNT</button>

myChild() 函数获取 id 等于 “DIV1” 的元素(在本例中为 <div> 元素)，并获取其 children.length 属性值并将其赋值给变量 x。这里需要注意的是，children 属性不考虑空格和注释，因此它只会考虑两个 <p> 元素，并且 children.length 将返回 2。然后，该值将使用 innerHTML() 方法显示在 id 为 “Sample” 的段落中 −

function myChild() {
   var x = document.getElementById("DIV1").children.length;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}