Cargando...

Seleccionar elementos

Un estante de panadería guarda un título y tres fichas. El título dice Rye. Las fichas nombran el turno: Morning, Noon y Evening. La última ficha lleva también la clase sold. El estante es un main con id shelf. Dentro hay un h2 con id loaf y luego tres elementos p con clase tag. Seleccionar es pedirle al documento vivo esos nodos por un nombre que tú eliges. document.getElementById("loaf") devuelve el título, y su texto es Rye. document.getElementsByClassName("tag") devuelve una lista viva de longitud 3. document.querySelector(".tag") devuelve Morning, la primera ficha. document.querySelectorAll(".tag") devuelve una lista fija, y el índice 1 es Noon. Un nombre que el estante nunca escribe es null desde querySelector, y una lista de longitud 0 desde querySelectorAll.

Cinco llamadas, no un paseo por el árbol

La página del DOM nombraba el padre de un título y contaba hijos elemento frente a todos los nodos. Esta página no lee parentElement, ni nextElementSibling, ni children, y no llama a Math. El árbol ya está. Aquí distingues qué llamada devuelve un nodo, cuál devuelve una lista y qué resultado significa que nada coincidió.

Qué devuelve cada llamada

Cuenta en el estante que solo tiene el título y las tres fichas. El archivo de lectura, más abajo, añade otro párrafo, así que allí cambia el recuento de elementos p.

📊 Qué devuelve cada llamada

Llamada Qué vuelve En este estante Fácil de confundir
getElementById("loaf") un elemento, o null texto del título Rye una lista que hay que indexar
getElementsByClassName("tag") HTMLCollection viva longitud 3 escribir el punto, como en .tag
getElementsByTagName("p") HTMLCollection viva longitud 3 el título, que es un h2
querySelector(".tag") primer acierto, o null la ficha Morning todas las fichas
querySelectorAll(".tag") NodeList estática longitud 3; el índice 1 es Noon una colección viva
querySelectorAll(".oven") NodeList vacía longitud 0 null

El método de clase y un selector CSS no escriben el punto igual. getElementsByClassName("tag") quiere el nombre pelado tag. getElementsByClassName(".tag") busca una clase que se llame literalmente .tag y devuelve longitud 0. querySelector quiere CSS, así que el punto se queda en .tag. querySelector("tag") busca un elemento cuyo nombre de etiqueta sea tag, no encuentra ninguno y devuelve null. El índice 0 es la primera ficha. El índice 1 es Noon. La lista de getElementsByClassName está viva: si una página posterior añade otra ficha tag, la longitud crece. querySelectorAll conserva la longitud del momento de la llamada. Evening lleva dos clases, tag y sold, así que entra en la lista de longitud 3 y es también el único acierto de sold.

Un id, un elemento

Un id debe ser único en la página. getElementById devuelve ese único elemento, o null si el id no está. No devuelve una lista, y solo existe en document, no en un elemento.

Un id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

La primera línea es Rye. La segunda es false, porque el título está en el estante. Si dos elementos compartieran el id loaf, la llamada seguiría devolviendo solo el primero del documento.

Nombre de clase y nombre de etiqueta

Las dos llamadas devuelven una HTMLCollection viva. Lee length antes de tomar una ficha. Cuenta en el estante de cuatro elementos, no en el archivo de lectura.

Clase y etiqueta

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

Las líneas son 3, 3 y 1. Tres fichas comparten tag. Las tres son elementos p y el título es un h2, así que en este estante el recuento de etiqueta coincide con el de clase. Solo Evening tiene sold. getElementsByClassName(".tag") es otra llamada: el punto no forma parte del nombre de clase, así que esa longitud es 0.

El primer acierto CSS

querySelector devuelve un elemento, el primero en el orden del documento, o null.

Primer acierto

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

La primera línea es Morning. La segunda es Evening. #shelf .sold significa un elemento con clase sold dentro del estante, no el estante mismo. document.getElementById("shelf").querySelector(".sold") empieza en el estante y cae en esa misma ficha Evening.

Todos los aciertos y luego un índice

querySelectorAll devuelve cada acierto en una NodeList estática. La lista puede estar vacía. No es null.

Todos los aciertos

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

La longitud es 3. El índice 1 es Noon. El índice 0 es Morning y el índice 2 es Evening. Esta lista no crece si un script posterior añade una ficha. La HTMLCollection de getElementsByClassName("tag") sí crecería. Una es una foto del momento. La otra sigue viva.

Un nombre que el estante no escribió

Pide un id y una clase que no están en el archivo.

Nada coincidió

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

La primera línea es null. La segunda es null. La tercera es 0. querySelectorAll sigue devolviendo una lista cuando nada coincide, así que lees longitud 0, y la lista en sí no es null. getElementById no tiene lista que devolver, así que un fallo es null, no 0.

Una línea en la página

Un párrafo dice cuántas fichas tag hay, cuál es la primera y cuál es la ficha sold. El script va al final de body, cuando esos elementos ya existen. La línea no tiene clase tag, así que no es una de las tres.

Demo de página — tres fichas

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

El párrafo muestra 3 / Morning / Evening. En este archivo, getElementsByTagName("p") cuenta 4, porque la línea es otro p. querySelectorAll(".tag") sigue contando 3. La página siguiente cambia el HTML de elementos que estas llamadas ya encontraron.

Revisa el estante

  1. Anota el texto del título y espera Rye; luego la comprobación de null y espera false
  2. Anota la longitud de clase, la de p y la de sold: 3, 3 y 1
  3. Anota el texto del primer .tag y espera Morning; luego #shelf .sold y espera Evening
  4. Anota la longitud de querySelectorAll y espera 3; el índice 1 debe ser Noon
  5. Anota el id ausente y el querySelector ausente y espera null las dos veces
  6. Anota querySelectorAll(".oven").length y espera 0
  7. Lee el párrafo y espera 3 / Morning / Evening

Llamada equivocada

La página sigue abierta. La llamada que escribiste pidió otra cosa.

  • Pasar .tag a getElementsByClassName; el punto solo cabe en un selector CSS
  • Pasar tag sin punto a querySelector y esperar las fichas
  • Leer el índice 1 como la primera ficha
  • Tomar un fallo de querySelectorAll como null en lugar de longitud 0
  • Tomar un fallo de getElementById como una lista de longitud 0
  • Contar getElementsByTagName("p") en el archivo de lectura y esperar 3
  • Llamar a .map sobre la HTMLCollection; no es un array
  • Leer parentElement en esta página; eso era la página del árbol

Qué te llevas

  • getElementById devuelve un elemento, o null
  • getElementsByClassName y getElementsByTagName devuelven una HTMLCollection viva
  • El método de clase quiere tag, no .tag
  • querySelector devuelve el primer acierto CSS, o null
  • querySelectorAll devuelve una NodeList estática; un fallo tiene longitud 0
  • El índice 0 es Morning y el índice 1 es Noon
  • La página siguiente cambia el HTML de elementos que ya seleccionaste

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 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
Tema 45 de 45
Javascript Tutorial