dom

Seleccionando nodos del DOM con childNodes

Podemos seleccionar bloques del DOM de varias formas, una que no es muy común es usando childNodes, ejemplo teniendo:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>test</title>
 </head>
 <body>
 <h1>hola mundo</h1>
 <p>probando</p>
 </body>
</html>

Recordando que document es un objeto, podemos acceder a su información mediante notación punto o computed member access. De esta forma teniendo el documento HTML de ejemplo, podemos introducir en la consola lo siguiente para seleccionar elementos del DOM, document.childNodes; para mostrar los nodos en ese nivel y document.childNodes[x]; para mostrar el nodo «x». Ejemplo:

> document.childNodes;
< (2) [<!DOCTYPE html>, html]

De la misma forma podemos acceder a cualquier nodo:

> document.childNodes[1];
< <html>​<head>​…​</head>​<body>​…​</body>​</html>​

> document.childNodes[1].childNodes[2];
< <body>​…​</body>​

> document.childNodes[1].childNodes[2].childNodes;
< (5) [text, h1, text, p, text]

> document.childNodes[1].childNodes[2].childNodes[1]
< <h1>​hola mundo​</h1>​

Deja un comentario