Tengo dos dudas por los momentos
cuando se hace console.log(document.form); por ejemplo, lo que aparece en la consola no lo tengo muy claro. es lo visto en el video «Acceder a elementos del html con document»
En el tema de queryselectgorall pasa que el queryselector busca un solo elemento o el primer elemento con lo que se busca, y el queryselectorall busca a todos. Pero como puedo seleccionar, por ejemplo, todas las .card de determinado div que tengo una clase por ejemplo .conten. Pensé que con señalar quweryslectroall( .conten .card); se podría lograr y ocurre que no
El DOM
Esto es como decir la red de carreteras y autopistas, solo que tiene una raíz, es decir, siempre se parte desde un mismo sitio: el document.
Acceder a los elementos del DO
Aquí se va a explicar que todo comienza con <document>, que tenemos tipos de elementos, y los selectores más usados.
Document
El document es todo el Html, es la manera como accedemos al DOM. Si escribimos document en la consola todo se selecciona. Dicho de otra manera, es el root en el DOM.
Seleccionar una etiqueta en el document
Podemos seleccionar una etiqueta para obtener su contenido y guardarlo en una variable. Si, por ejemplo, seleccionamos la etiqueta <head>, obtendremos su contenido.
let elemento;
elemento = document.head;
console.log(elemento);
La consola de Firefox
En la consola de Firefox me despliega una lista de los parámetros que puedo ver en un elemento. Cuando selecciono document solamente veo todo hacia donde puedo diversificar mediante el DOM.
Contenidos y HTMLCollection
Si vemos el head como parámetro del elemento <document> (elemento root) en Firefox veo que lo que voy a ver es la etiqueta en si. Pero si selecciono el parámetros forms, entonces veré un HTML Collection.
Veo que si le pido que se posicione en una etiqueta html me muestra el contenido de la etiqueta.
HTMLCollecction
Esto es un ejemplo seleccionando forms y allí veo como lo que se observa es un HTMlCollection.
let elemento;
elemento = document.forms;
console.log(elemento);
Este HTMLCollection se lista como si fuese un arreglo, pero no lo es, se llama HTMLCollection, se puede ver que sus elementos son los diferentes elementos de su tipo que existen en todo el documento. Puedo acceder a uno de ellos de manera parecida a como accedo en un arreglo. E incluso más allá viendo el id del formulario seleccionado.
let elemento;
elemento = document.forms[0].id;
console.log(elemento);
DOMTokenlist
Un HTMLCollection aparece cuando selecciono algo que arroja multiples etiquetas, pero si me paro sobre una etiqueta específica, como un enlace con link, y le pido sus clases, obtendré una colección de datos que me los muestra bajo el nombre de DOMTokenlist.
let elemento;
elemento = document.links[4].classList;
console.log(elemento);
Igualmente puedo, por medio del índice acceder a esas clases o token lists específicos.
getElementByClassName
Sin muchos detalles, esto selecciona elementos del DOM por su clase.
// Seleccionando el header...
// Todos tus selectores inician con document...
const header = document.getElementsByClassName('header'); // Es muy importante las mayusculas y minusculas...
console.log(header);
const hero = document.getElementsByClassName('contenido-hero');
console.log(hero);
// Como las classes se pueden repetir, obviamente todas las coincidencias de classes se asignaran a contenedores.
const contenedores = document.getElementsByClassName('contenedor');
console.log(contenedores);
// Si una clase no existe, no va a retornar nada...
const noExiste = document.getElementsByClassName('no-existe');
console.log(noExiste);
getElementById
Tampoco necesita mayor exolicación
const formulario = document.getElementById('formulario');
console.log(formulario);
// Si no exist estará vacío
const noExiste = document.getElementById('no-existe');
console.log(noExiste);
// Añadir un ID 2 veces, seleccionara el primero que encuentre...
querySelector
Este si es el papá de los helados. Pero tampoco necesita mucha explicación.
Nota del Instructor: QuerySelector va a retornar máximo 1 elemento, si hay múltiples coincidencias solo va a retornar el primero. QuerySelctor utiliza una sintaxis como de selector de CSS, por lo tanto si deseas seleccionar una clase, debe tener un punto al inicio. Notas del instructor
const card = document.querySelector('.card'); // Selecciona el primer .card
console.log(card);
// al ser una sintaxis tipo CSS puedes utilizar selectores específicos
const info = document.querySelector('.premium .info');
console.log(info);
// Seleccionar el segundo card... de hospedaje
const segundoCard = document.querySelector('.hospedaje .card:nth-child(2)');
console.log(segundoCard);
// Ahora estas son classes, veamos como seleccionar un ID
const formulario = document.querySelector('#formulario');
console.log(formulario);
// Se puede tener selectores específicos con ID como el de arriba,
// pero un ID es único así que no tendría mucho sentido
// const formulario = document.querySelector('.contenido-hero #formulario');
// Si un selector no existe,
const noExiste = document.querySelector('#no-existe');
console.log(noExiste);
// En CSS puedes seleccionar etiquetas, así que si quieres seleccionar la navegación podrías tener algo así:
const nav = document.querySelector('nav');
console.log(nav);
Aunque mantengo la duda de por qué en Chrome no me muestra la navegación como me la muestra para los card
No ocurrió así en la consola de Firefox:
querySelectorAll
Tampoco hace falta mayores explicaciones.
La buena noticia es que la sintaxis para selectores es la misma, es decir similar a CSS, con el punto para las classes y el numeral o signo de gato para los ID’s, también puedes añadir un selector especifico.. Pero la diferencia principal, es que querySelectorAll va a retornar todos los elementos que concuerden con el selector y no va a limitarte al primero como querySelector. En nuestro HTML hay muchos cards, cuando utilizamos querySelector vimos que retornaba únicamente el primero, con querySelectorAll los retorna todos Notas del instructor
const cards = document.querySelectorAll('.card');
console.log(cards);
// si recuerdas tenemos dos elementos con el id de formulario
const formularios = document.querySelectorAll('#formulario');
console.log(formularios); // Puedes ver que eso si funciona, sin embargo recuerda que no es recomendable
//tener el mismo ID más de una vez por documento...
// Si un selector no existe,
const noExiste = document.querySelectorAll('#no-existe');
console.log(noExiste);
NodeList
En el punto anterior, se observa que no muestra un HTMLCollection, ni un DOMTokenlist, lo que muestra es un NodeList. Otro tipo de elemento más que vamos encontrando. El instructor dijo en un momento que todo lo que vemos en el DOM son nodos.