Navegación DOM de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


Con HTML DOM, puedes navegar por el árbol de nodos usando node relaciones.


Nodos DOM

Según el estándar HTML DOM del W3C, todo lo que hay en un documento HTML es un nodo:

  • Todo el documento es un nodo de documento.

  • Cada elemento HTML es un nodo de elemento.

  • El texto dentro de los elementos HTML son nodos de texto.

  • Cada atributo HTML es un nodo de atributo (obsoleto)

  • Todos los comentarios son nodos de comentarios.

Con HTML DOM, se puede acceder a todos los nodos del árbol de nodos mediante JavaScript.

Se pueden crear nuevos nodos y todos Los nodos se pueden modificar o eliminar.


Relaciones de nodo

Los nodos del árbol de nodos tienen una relación jerárquica entre sí.

Los términos padre, hijo y hermano se utilizan para describir las relaciones.

  • En un árbol de nodos, el nodo superior se llama raíz (o nodo raíz)

  • Cada nodo tiene exactamente un padre, excepto la raíz (que no tiene padre)

  • Un nodo puede tener varios hijos.

  • Los hermanos (hermanos o hermanas) son nodos con el mismo padre.

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>
    

En el HTML anterior puedes leer:

  • <html> es el nodo raíz

  • <html> no tiene padres

  • <html> es el padre de <head> y < cuerpo>

  • <head> es el primer hijo de <html>

  • <body> es el último hijo de <html>

y :

  • <head> tiene un hijo: <title>

  • <title> tiene un hijo (un nodo de texto): "Tutorial DOM"

  • <body> tiene dos hijos: <h1> y < p>

  • <h1> tiene un hijo: "DOM Lección uno"

  • <p> tiene un hijo: "¡Hola mundo!"

  • <h1> y <p> son hermanos



Navegando entre nodos

Puede utilizar las siguientes propiedades de nodo para navegar entre nodos con JavaScript:

  • parentNode

  • childNodes[número de nodo]

  • primerhijo

  • último hijo

  • siguienteHermano

  • anteriorHermano


Nodos secundarios y valores de nodo

Un error común en el procesamiento DOM es esperar que un nodo de elemento contenga texto.

Ejemplo :

<title 
 id="demo">DOM Tutorial</title>

El nodo del elemento <title> (en el ejemplo anterior) no contiene texto.

Contiene un nodo de texto con el valor "Tutorial DOM".

Se puede acceder al valor del nodo de texto mediante la propiedad innerHTML del nodo:

myTitle = document.getElementById("demo").innerHTML;

Acceder a la propiedad internalHTML es lo mismo que acceder a nodeValue del primer hijo:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Acceder al primer hijo también se puede hacer así:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Todos los (3) ejemplos siguientes recuperan el texto de un elemento <h1> y lo copian. en un elemento <p>:

Ejemplo

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML 
 = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Ejemplo

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Ejemplo

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

HTML interno

En este tutorial utilizamos la propiedad InnerHTML para recuperar el contenido de un Elemento HTML.

Sin embargo, aprender Los otros métodos anteriores son útiles para comprender la estructura del árbol y el navegación del DOM.


Nodos raíz DOM

Hay dos propiedades especiales que permiten acceder al documento completo:

  • document.body - El cuerpo del documento

  • document.documentElement - El documento completo

Ejemplo

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p 
id="demo"></p>
<script>
document.getElementById("demo").innerHTML 
= document.body.innerHTML;
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Ejemplo

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
document.documentElement.innerHTML;
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

La propiedad nodeName

La propiedad nodeName especifica el nombre de un nodo.

  • nodeName es de solo lectura

  • El nombre de nodo de un nodo de elemento es el mismo que el nombre de la etiqueta.

  • nodeName de un nodo de atributo es el nombre del atributo

  • El nombre de nodo de un nodo de texto siempre es #texto.

  • El nombre de nodo del nodo del documento siempre es #documento.

Ejemplo

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

</body>
</html>

Nota: nodeName siempre contiene el nombre de etiqueta en mayúsculas de un elemento HTML.


La propiedad nodeValue

La propiedad nodeValue especifica el valor de un nodo.

  • nodeValue para los nodos de elementos es null

  • nodeValue para nodos de texto es el texto mismo

  • nodeValue para nodos de atributos es el valor del atributo


La propiedad tipo de nodo

La propiedad nodeType es de solo lectura. Devuelve el tipo de nodo.

Ejemplo

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

</body>
</html>

Las propiedades de nodeType más importantes son:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

El tipo 2 está obsoleto en HTML DOM (pero funciona). No está en desuso en XML DOM.