Con HTML DOM, puedes navegar por el árbol de nodos usando node relaciones.
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.
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
Puede utilizar las siguientes propiedades de nodo para navegar entre nodos con JavaScript:
parentNode
childNodes[número de nodo]
primerhijo
último hijo
siguienteHermano
anteriorHermano
Un error común en el procesamiento DOM es esperar que un nodo de elemento contenga texto.
<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>
:
<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>
<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>
<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>
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.
Hay dos propiedades especiales que permiten acceder al documento completo:
document.body
- El cuerpo del documento
document.documentElement
- El documento completo
<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>
<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
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.
<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
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 nodeType
es de solo lectura. Devuelve el tipo de nodo.
<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.