Una página con familia
Piensa en un árbol genealógico. Hay abuelos, padres e hijos.
Una página web es igual. Una etiqueta contiene a otras, y estas contienen a otras más.
Cuando el navegador lee tu HTML, construye ese árbol en memoria. JavaScript puede entrar en él y buscar lo que quiera.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| DOM | El árbol de la página que el navegador guarda en memoria. JavaScript lo puede leer. | document |
| Nodo | Cada pieza del árbol: una etiqueta, un texto. | <p> |
| Elemento | Un nodo que es una etiqueta de HTML. | <h1> |
| Selector | Un texto que dice qué elementos buscas. Es el mismo que usas en CSS. | #title |
| Hijo | Una etiqueta que está dentro de otra. | li dentro de ul |
| null | El valor que da la búsqueda cuando no encuentra nada. | null |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La puerta de entrada: document
En JavaScript, la palabra document es la página entera. Desde ahí empiezas a buscar.
Dos órdenes te bastan por ahora. document.querySelector da el primer elemento que encaja. document.querySelectorAll da todos, en una lista.
Pruébalo: buscar y contar
<h1 id="title">El bar del instituto</h1>
<ul id="menu">
<li class="item">Bocadillo</li>
<li class="item">Zumo</li>
<li class="item special">Tortilla</li>
</ul>
<pre id="output"></pre>
Ejemplo resuelto: qué elige cada selector
| Selector | Elige | Elementos en la página de arriba |
|---|---|---|
| #title | El que tiene id="title" | 1 |
| .item | Los que tienen class="item" | 3 |
| li | Todas las etiquetas li | 3 |
| .special | Los que tienen class="special" | 1 |
| #menu li | Los li que están dentro de #menu | 3 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: selectores
Inténtalo
Repaso rápido: selectores
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Leer el texto de un elemento
Un elemento guarda su texto en textContent. Lo lees con un punto, igual que la propiedad de un objeto.
Si buscas algo que no existe, el resultado es null. Y pedirle textContent a null da un error.
Pruébalo: recorrer los elementos
<h1 id="title">El bar del instituto</h1>
<ul id="menu">
<li class="item">Bocadillo</li>
<li class="item">Zumo</li>
<li class="item special">Tortilla</li>
</ul>
<pre id="output"></pre>