La propiedad DOM children se usa para devolver la colección HTML de todos los elementos secundarios del elemento especificado. Se puede acceder a los elementos de la colección mediante números de índice. Se diferencia de childNodes en que childNodes contiene todos los Nodes (es decir, incluye también Nodes de texto y comentarios) pero, por otro lado, child contiene solo Nodes de elementos. Esta es una propiedad de solo lectura.
Sintaxis:
element.children
Valor devuelto: Devuelve una colección de Nodes de elementos a los que se puede acceder mediante la indexación.
Ejemplo 1: este ejemplo devuelve el número de elementos de la lista.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM children Property
</title>
<!-- Script to count children of parent attribute -->
<script>
function Geeks() {
var count =
document.getElementById("parent").children.length;
document.getElementById("p").innerHTML =
"No of Children: " + count;
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
DOM children Property
</h2>
<p>Searching Algorithms</p>
<ul id="parent">
<li>Merge sort</li>
<li>Quick sort</li>
</ul>
<button onclick="Geeks()">
Click Here!
</button>
<p id="p"></p>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM children Property
</title>
<script>
function Geeks() {
var doc =
document.getElementById("parent").children;
var i;
for(i = 0; i < doc.length; i++) {
doc[i].style.color = "white";
doc[i].style.backgroundColor = "green";
}
}
</script>
</head>
<body style = "text-align:center">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>
DOM children Property
</h2>
<div id = "parent">
<p>
A computer science portal for geeks.
</p>
<p>
Geeks classes an extensive programme for geeks.
</p>
</div>
<button onclick = "Geeks()">Click me!</button>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM child se enumeran a continuación:
- Google Chrome 2.0
- Internet Explorer 9.0*
- Firefox 3.5
- Ópera 10.0
- Apple Safari 4.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA