La propiedad childNodes devuelve los Nodes secundarios de un Node como un objeto nodeList . Los espacios en blanco y los comentarios también se consideran Nodes. A los Nodes se les asignan números de índice, a partir de 0 . Las operaciones de búsqueda y clasificación se pueden realizar utilizando el número de índice en la lista de Nodes. Sintaxis:
elementNodeReference.childNodes;
Valor devuelto: Devuelve una colección de Nodes secundarios de un Node en particular como un objeto nodeList (incluidos espacios en blanco, textos y comentarios, que se consideran Nodes). Propiedades:
- propiedad length: Determina el número de Nodes hijos del objeto. Es una propiedad de sólo lectura . Sintaxis:
elementNodeReference.childNodes.length;
elementNodeReference.childNodes[index_number].length;
- Ejemplo-1: Mostrar la propiedad de longitud.
html
<!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press</button> </center> </h1> <h4>Clicking on the 'Press' button will return the length of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the length of child node. var c = document.getElementsByTagName( "BUTTON")[0]; var x = c.childNodes[0].length; document.getElementById("gfg").innerHTML = x; } </script> </body> </html>
- Salida: Antes de hacer clic en el botón: Después de hacer clic en el botón:
- Propiedad nodeName: Devuelve el nombre del Node especificado. Si el Node es un Node de elemento, devolverá el nombre de la etiqueta; de lo contrario, si el Node es un Node de atributo, devolverá el nombre del atributo; de lo contrario, para diferentes tipos de Nodes, se devolverán nombres diferentes. Sintaxis:
elementNodeReference.childNodes[index_number].nodeName;
- Ejemplo-2: Mostrando la propiedad nodeName
html
<!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press </button></center> </h1> <h4>Clicking on the 'Press' button will return the node name of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the name of specific node name. var c = document.getElementsByTagName( "BUTTON")[0]; var x = c.childNodes[0].nodeName; document.getElementById("gfg").innerHTML = x; } </script> </body> </html>
- Salida: Antes de hacer clic en el botón: Después de hacer clic en el botón:
- Propiedad nodeValue: establece o devuelve el valor de Node del Node especificado. Sintaxis:
elementNodeReference.childNodes[index_number].nodeValue;
- Ejemplo-3: Mostrando la propiedad nodeValue
html
<!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press </button></center> </h1> <h4>Clicking on the 'Press' button will return the node value of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the node value. var c = document.getElementsByTagName("BUTTON")[0]; var x = c.childNodes[0].nodeValue; document.getElementById("gfg").innerHTML = x; } </script> </body> </html>
- Salida: Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Compatibilidad con navegadores: los navegadores enumerados admiten la propiedad DOM childNodes :
- Google cromo 1+
- Borde 12+
- Firefox 1+
- Explorador de Internet 5+
- Ópera 7+
- Safari 1.2+
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA