JavaScript HTML DOM Navegación
Con HTML DOM, puede navegar por el árbol de nodos utilizando relaciones de nodos.
Nodos DOM
De acuerdo con el estándar W3C HTML DOM, todo 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 el HTML DOM, JavaScript puede acceder a todos los nodos del árbol de nodos.
Se pueden crear nuevos nodos y todos los nodos se pueden modificar o eliminar.
Relaciones de nodos
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>
Desde el HTML anterior se puede leer:
<html>es el nodo raíz<html>no tiene padres<html>es el padre de<head>y<body><head>es el primer hijo de<html><body>es el ultimo 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: "Lección uno de DOM"<p>tiene un hijo: "¡Hola mundo!"<h1>y<p>son hermanos
Navegación entre nodos
Puede usar las siguientes propiedades de nodo para navegar entre nodos con JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Nodos secundarios y valores de nodos
Un error común en el procesamiento de 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
innerHTMLpropiedad del nodo:
myTitle = document.getElementById("demo").innerHTML;
Acceder a la propiedad innerHTML es lo mismo que acceder a la nodeValue
del primer hijo:
myTitle = document.getElementById("demo").firstChild.nodeValue;
El acceso 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 <h1>elemento y lo copian en un <p>elemento:
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>
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>
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>
HTML interno
En este tutorial usamos la propiedad innerHTML para recuperar el contenido de un elemento HTML.
Sin embargo, aprender los otros métodos anteriores es útil para comprender la estructura de árbol y la navegación del DOM.
Nodos raíz DOM
Hay dos propiedades especiales que permiten el acceso 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>
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>
La propiedad nodeName
La nodeNamepropiedad especifica el nombre de un nodo.
- nodeName es de solo 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 siempre es #text
- nodeName del nodo del documento siempre es #document
Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Nota: nodeName siempre contiene el nombre de la etiqueta en mayúsculas de un elemento HTML.
La propiedad nodeValue
La nodeValuepropiedad especifica el valor de un nodo.
- nodeValue para nodos de elementos es
null - nodeValue para nodos de texto es el texto mismo
- nodeValue para los nodos de atributo es el valor del atributo
La propiedad de tipo de nodo
La nodeTypepropiedad es de solo lectura. Devuelve el tipo de un nodo.
Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Las propiedades de tipo de nodo 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á en desuso en HTML DOM (pero funciona). No está en desuso en el XML DOM.