d) Navegación

on el DOM de HTML, se puede navegar por el árbol de nodos utilizando relaciones de nodo.

Los nodos DOM

De acuerdo con el estándar W3C HTML DOM, todo en un documento HTML es un nodo:

El documento entero es un nodo de documento
Cada elemento HTML es un nodo elemento
El texto dentro de los elementos HTML son nodos de texto
Cada atributo HTML es un nodo de atributo (en desuso)
Todos los comentarios son nodos de comentario

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

Nuevos nodos pueden ser creados, y todos los nodos pueden ser modificados o eliminados.

relaciones nodo

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

El términos padre, hijo, hermano y se usan para describir las relaciones.

En un árbol de nodos, el nodo superior se llama la raíz (o nodo raíz)
Cada nodo tiene exactamente un padre, excepto la raíz (que no tiene padre)
Un nodo puede tener un número de niños
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>

Desde el HTML anterior se puede leer:

<Html> es el nodo raíz
<Html> no tiene padres
<Html> es la matriz de <head> y <body>
<Head> es el primer hijo de <html>
<Body> es el último hijo de <html>

<Head> tiene un hijo: <title>
<Title> tiene un hijo (un nodo de texto): "DOM Tutorial"
<Body> tiene dos hijos: <h1> y <p>
<H1> tiene un hijo: "Lección DOM uno"
<P> tiene un hijo: "¡Hola, mundo!"
<h1> y <p> son hermanos

Navegando entre nodos

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

parentNode
childNodes [ NodeNumber ]
primer hijo
último niño
nextSibling
previousSibling

Nodos secundarios y valores de nodo

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

Ejemplo:

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

El nodo de elemento <title> (en el ejemplo anterior) no no contienen texto.

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

El valor del nodo de texto se puede acceder por el nodo de innerHTML propiedad:

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

Acceso a la propiedad innerHTML es el mismo que el acceso a la nodeValue del primer hijo:

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

Acceso al primer hijo también se puede hacer de esta manera:

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

La propiedad nodeValue

La propiedad nodeValue especifica el valor de un nodo.

nodeValue para nodos de elemento está definido
nodeValue para los nodos de texto es el propio texto
nodeValue para los nodos de atributo es el valor del atributo

La propiedad nombreNodo

La propiedad nodeName especifica el nombre de un nodo.

nodeName es de sólo lectura
nodeName 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
nodeName de un nodo de texto es siempre #text
nodeName del nodo documento está siempre #document

Ejemplo

Obtenga el contenido HTML del primer nodo hijo de un elemento <ul>:

var x = document.getElementById("myList").firstChild.innerHTML;

Inténtalo tú mismo "

Ejemplo

Obtenga el contenido HTML del último nodo hijo de un elemento <ul>:

var x = document.getElementById("myList").lastChild.innerHTML;

Inténtalo tú mismo "

Ejemplo

Obtenga el contenido HTML del siguiente hermano de un elemento de lista:

var x = document.getElementById("item1").nextSibling.innerHTML;

Inténtalo tú mismo "

Ejemplo

Obtenga el contenido HTML del hermano anterior de un elemento de lista:

var x = document.getElementById("item2").previousSibling.innerHTML;

Inténtalo tú mismo "

Page updated

Report abuse