El DOM de HTML
El archivo HTML en el disco solo guarda caracteres. El navegador arma con ese archivo un árbol vivo, y ese árbol es el DOM. En el cristal de la parada hay dos líneas: el título Market y la nota Stand clear. La página abierta ya trae document. new document() lanza un error, y new Document() es un documento vacío, no este panel.
Un árbol, no un redondeo
En la página del objeto Math pedías un número a un objeto compartido. Aquí no se redondea un ancho ni se construye un instante con new Date. Bajas desde document: el elemento html, luego head al lado de body, luego el título al lado de la nota. Elegir elementos por más de un camino, cambiar el marcado y crear nodos llega después. Esta página aprende la forma y lee dos nodos.
Dónde está cada pieza
Cada fila es un sitio al que puedes señalar. La última columna es la confusión que te manda a otro sitio.
📊 Lugares de este panel
| Lugar | Qué tienes en la mano | En este panel | Fácil de confundir |
|---|---|---|---|
document |
el árbol mismo | la entrada, sin nombre de etiqueta | tomarlo por body |
document.documentElement |
el elemento html | etiqueta HTML |
llamarlo el título |
document.head |
el elemento head | hermano de body | buscar Market aquí |
document.body |
el elemento body | padre del título | un nodo de texto |
h1#stop |
el elemento del título | texto Market |
el archivo guardado en el disco |
| texto dentro del título | solo caracteres | la palabra Market | un elemento con id |
El título y la nota son hijos elemento de body, así que son hermanos. La palabra Market no es hermana de la nota. Es texto dentro del título. tagName vuelve en mayúsculas, por eso el elemento html dice HTML. El nodo document no tiene etiqueta ni elemento padre.
Tres nombres arriba del árbol
Estas tres propiedades nombran los elementos de fuera. Ninguna es el título del cristal.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
Las tres líneas son HTML, HEAD y BODY. Head y body son hijos del elemento html, así que son hermanos. Market no está en head. El título de la pestaña en head es otra cadena, distinta del título del cristal.
La familia del título
El id stop es el asa del elemento del título. Su elemento padre es body. El hermano elemento siguiente es la nota.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
La primera línea es BODY. La segunda es note. nextElementSibling salta el salto de línea y cae en el párrafo. El hermano elemento anterior es null, porque ningún elemento está antes del título dentro de body.
La palabra y el asa
Leer el elemento no es leer los caracteres.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
La primera línea es Market. La segunda es stop. textContent son los caracteres. id es el asa. La nota dice Stand clear, y esa cadena no está en el título.
Primero elementos, luego cada nodo
children cuenta solo hijos elemento. childNodes cuenta también nodos de texto, incluidos los saltos de línea del archivo del panel. Ejecuta esto en un body que solo tenga el título y la nota, no en esta página de la lección ni en el archivo de lectura de abajo.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
Con un salto antes del título, otro entre los dos elementos y otro después de la nota, children.length es 2 y childNodes.length es 5. Los tres nodos de más son texto y solo tienen espacio. Si pegas ambas etiquetas en una línea, esos nodos de texto desaparecen y las dos longitudes se encuentran.
Un nombre que no está en el panel
Pide un id que el archivo nunca escribió.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
La primera línea es null. La segunda es false, porque stop sí existe. null significa que no hay elemento, no un título vacío. Asignar una cadena nueva a textContent cambia el árbol vivo en el navegador. El archivo HTML en el disco sigue diciendo Market.
Una línea en la página
Un tercer párrafo informa la etiqueta del padre y el texto del título. El script está al final de body, cuando esos elementos ya existen.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
El párrafo dice BODY / Market. En este archivo hay tres elementos en body antes del script, así que la longitud 2 no es de este archivo. El elemento script es otro hijo. La página siguiente elige elementos por más de un camino.
Revisa el panel
- Muestra los tres nombres de etiqueta exteriores y espera HTML, luego HEAD, luego BODY
- Muestra la etiqueta padre del título y espera BODY
- Muestra el id del hermano elemento siguiente y espera note
- Muestra el texto del título y espera Market, luego el id y espera stop
- En el panel de dos elementos, espera longitud de children 2 y de childNodes 5
- Muestra el id ausente y espera null, luego la comparación con stop y espera false
- Lee el párrafo y espera BODY / Market
Lugar equivocado
La página se abre. El lugar que nombraste no es el del título.
- Llamar a
new document()o leernew Document()como si fuera este panel - Buscar Market en
document.head - Tratar la palabra Market como hermano elemento de la nota
- Leer
children.lengthcuando querías cada nodo, incluidos los saltos de línea - Leer
childNodes.lengthcuando solo querías el título y la nota - Leer
nullde un id ausente como una cadena vacía - Esperar que escribir en
textContentcambie el archivo del disco
No los mezcles
documentes el árbol;documentElementes el elemento htmlheadybodyson hermanos bajo ese elemento html- El padre del título es body; el hermano elemento siguiente es la nota
textContentson los caracteres;ides el asachildrenson solo elementos;childNodesincluye el texto en blanco- Un id ausente es
null; el archivo guardado no es el árbol vivo - La página siguiente elige elementos por más de un id
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior