HTML DOM Navegación

Con el HTML DOM, puede navegar por el árbol de nodos utilizando las relaciones entre nodos.

Lista de nodos del HTML DOM

El método getElementsByTagName() devuelveuna lista de nodos. La lista de nodos es una matriz de nodos.

El siguiente código selecciona todos los nodos <p> del documento:

Ejemplo

var x=document.getElementsByTagName("p");

Puede acceder a estos nodos mediante un índice. Para acceder al segundo <p>, puede escribir:

y=x[1];

Pruébalo »

Nota:

Los índices comienzan en 0.

Longitud de la lista de nodos del HTML DOM

La propiedad length define el número de nodos en la lista de nodos.

Puede utilizar la propiedad length para recorrer la lista de nodos:

Ejemplo

x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br>"); }

Pruébalo »

Análisis del ejemplo:

  • Obtener todos los nodos de elementos <p>
  • Mostrar el valor del nodo de texto de cada elemento <p>

Navegación por las relaciones entre nodos

Puede navegar por la estructura del documento utilizando tres propiedades de nodos: parentNode, firstChild y lastChild.

Vea el siguiente fragmento de HTML:

<html> <head> <meta charset="utf-8"> </head> <body> <p>Hello World!</p> <div> <p>¡El DOM es muy útil!</p> <p>Este ejemplo demuestra las relaciones entre nodos.</p> </div> </body> </html>
  • El primer elemento <p> es el primer hijo (firstChild) del elemento <body>
  • El elemento <div> es el último hijo (lastChild) del elemento <body>
  • El elemento <body> es el padre (parentNode) del primer elemento <p> y del elemento <div>

La propiedad firstChild se puede utilizar para acceder al texto de un elemento:

Ejemplo

<p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script>

Pruébalo »

Nodo raíz del DOM

Aquí hay dos propiedades especiales que permiten acceder a todo el documento:

  • document.documentElement: todo el documento
  • document.body: el cuerpo del documento

Ejemplo

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

Pruébalo »

childNodes y nodeValue

Además de la propiedad innerHTML, también puede utilizar las propiedades childNodes y nodeValue para obtener el contenido de un elemento.

El siguiente código obtiene el valor del elemento <p> con id="intro":

Ejemplo

<p id="intro">Hello World!</p> <script> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script>

Pruébalo »

En el ejemplo anterior, getElementById es un método, mientras que childNodes y nodeValue son propiedades.

En este tutorial, utilizaremos la propiedad innerHTML. Sin embargo, aprender los métodos anteriores ayuda a comprender la estructura del árbol del DOM y la navegación.

Otras extensiones