Navegación de JavaScript HTML DOM

A través de HTML DOM, puedes usar relaciones de nodos para navegar por el árbol de nodos.

Nodo DOM

De acuerdo con el estándar W3C HTML DOM, todo lo que está en el 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 un elemento HTML es un nodo de texto
  • Cada atributo HTML es un nodo de atributo
  • Todas las anotaciones son nodos de anotación
Árbol DOM HTML

Con HTML DOM, todos los nodos en el árbol de nodos pueden ser accedidos mediante JavaScript.

Puedes crear nuevos nodos, modificar y eliminar todos los nodos.

Relaciones de nodos

Los nodos en el árbol de nodos tienen ciertas relaciones jerárquicas entre sí.

  • Los términos (padre, hijo y primo, parent, child y sibling) se utilizan para describir estas relaciones.
  • En el árbol de nodos, el nodo superior se llama raíz (nodo raíz).
  • Cada nodo tiene un nodo padre, excepto el raíz (el nodo raíz no tiene nodo padre).
  • Los nodos pueden tener una cierta cantidad de hijos
  • Primos (hermanos o hermanas) se refiere a nodos que tienen el mismo padre.
<html>
   <head>
       <title>Manual de DOM</title>
   </head>
  <body>
       <h1>Lección 1 de DOM</h1>
       <p>Hola mundo!</p>
   </body>
</html>
Árbol DOM HTML

A partir del siguiente HTML, puedes leer la siguiente información:

  • <html> es el nodo raíz
  • <html> no tiene padre
  • <html> es el padre de <head> y <body>
  • Es el primer hijo de <html>
  • <body> es el último hijo de <html>

Al mismo tiempo:

  • <head> tiene un hijo: <title>
  • <title> tiene un hijo (nodo de texto): "DOM Tutorial"
  • <body> tiene dos hijos: <h1> y <p>
  • <h1> tiene un hijo: "Lección DOM primero"
  • <p> tiene un hijo: "¡Hola mundo!"
  • <h1> y <p> son hermanos

Navegación entre nodos

A través de JavaScript, puede usar las siguientes propiedades de nodo para navegar entre nodos:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

nodos hijos y valores de nodo

Un error común en el manejo DOM es creer que los nodos de elemento contienen texto.

Ejemplo:

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

elemento de nodo <title> (en el ejemplo anterior) No contienede texto.

Contiene el texto "DOM Tutorial"Nodo de texto.

El valor de un nodo de texto se puede obtener a través del nodo innerHTML Para acceder a la propiedad se utiliza:

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

Acceder a la propiedad innerHTML es equivalente a acceder al primer nodo hijo nodeValue:

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

También se puede acceder al primer nodo hijo de la siguiente manera:

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

Los siguientes tres ejemplos recuperan <h1> Copiar el texto del elemento a <p> Elemento dentro de:

Ejemplo 1

<html>
<body>
<h1 id="id01">Mi primera página</h1>
<p id="id02">¡Hola!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Prueba por tu cuenta

Ejemplo 2

<html>
<body>
<h1 id="id01">Mi primera página</h1>
<p id="id02">¡Hola!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Prueba por tu cuenta

Ejemplo 3

<html>
<body>
<h1 id="id01">Mi primera página</h1>
<p id="id02">¡Hola!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Prueba por tu cuenta

InnerHTML

En este tutorial, usamos innerHTML Recuperar el contenido del elemento HTML.

Sin embargo, aprender los otros métodos anteriores ayuda a entender la estructura de árbol y la navegación del DOM.

Nodo raíz del DOM

Hay dos propiedades especiales que permiten acceder al documento completo:

  • document.body - Cuerpo del documento
  • document.documentElement - Documento completo

Ejemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM es muy útil!</p>
<p>Este ejemplo muestra la propiedad <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Prueba por tu cuenta

Ejemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM es muy útil!</p>
<p>Este ejemplo muestra la propiedad <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Prueba por tu cuenta

Propiedad

El nombre del nodo La propiedad especifica el nombre del nodo.

  • El nombre del nodo es de solo lectura
  • El nombre del nodo del nodo de elemento es equivalente al nombre de la etiqueta
  • El nombre del nodo del nodo de atributo es el nombre del atributo
  • El nombre del nodo del nodo de texto siempre es #text
  • El nombre del nodo del nodo de documento siempre es #document

Ejemplo

<h1 id="id01">Mi primera página web</h1>
<p id="id02">¡Hola!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Prueba por tu cuenta

Nota:El nombre del nodo

Propiedad

nodeValue La propiedad especifica el valor del nodo.

  • El valor del nodo de elemento es undefined
  • El valor del nodo de texto es el texto
  • El valor del nodo de atributo es el valor del atributo

Propiedad

La propiedad devuelve el tipo del nodo.La propiedad es de solo lectura.

Ejemplo

<h1 id="id01">Mi primera página web</h1>
<p id="id02">¡Hola!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Prueba por tu cuenta

La propiedad nodeType más importante es:

Nodo Tipo Ejemplo
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (descontinuado)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Esto es un comentario -->
DOCUMENT_NODE 9 El documento HTML en sí mismo (padre de <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 ha sido descontinuado en HTML DOM. No se ha descontinuado en XML DOM.