Leer nodos

Básicamente tenemos 4 formas de leer nodos con JS: . .

parent.getElementById('id') => nos permite obtener un elemento a través de su id. .
parent.getElementsByClassName('class') => obtiene un array con todos los elementos hijos que tengan esa clase, ojo "getElementByClassName" no existe, es decir no podremos obtener solo 1 elemento con esa clase. .
parent.getElementsByTagName('div') => con este método obtenemos una lista o "array list" con todos los elementos que tengan esa etiqueta, ejemplo todos los divs. Al igual que con el método anterior no hay posibilidad de usarlo en singular, siempre tendremos que usar getElements .
parent.querySelector() => nos permite buscar de 3 formas, con id, clase o tagName. A diferencia de los 2 anteriores este nos devuelve 1 solo elemento, el primero que contenga el valor que se le paso. Id => ('#id'), class => ('.class'), tagName ('div') .
parent.querySelectorAll() => este método retorna una array list con todos los elementos que tengan ese selector (id, class o tagName) . Casi siempre el elemento "padre o parent" es document. ya que estamos haciendo referencia a todo el DOM, todo el documento y esto en ciertos casos nos permite evitar errores. ejemplo = const button = document.querySelector('#button)

Jimmy Buriticá Londoño

Muy bien explicado, gracias.

Andrés Felipe García Rendón

Muchas gracias por compartir tus apuntes. Saludos

Alex Maldonado

Pablo Guzman

Esto debería estar entre los más votados

Rolando Mamani Salas

Muy buen aporte muchas gracias

Daniloo Morales

Hola, Me gustaría compartir un resumen de la clase 🚀

Jonathan 🦑 Alvarez

Profesor

Ay pero que bello

Edgar Lopez Arroyo

Que buen resumen!!! :D

Carlos Eduardo Gomez García

Desde JavaScript podemos leer nodos, tenemos 3 formas de hacerlo: .

document.getElementById(): Obtiene un elemento por su ID
parent.getElementByTagName(): Retorna un arreglo (realmente es un HTMLCollection) con todos los resultados coincidentes por el nombre de su etiqueta
parent.getElementByClassName(): Retorna un arreglo (realmente es un HTMLCollection) con todos los resultados coincidentes por su clase

. Sin embargo, existen 2 selectores más poderosos 👀: .

parentElement.querySelector(): Selecciona un solo elemento y lo devuelve, la selección se hace a través de lo que le pases entre paréntesis, y la selección puede ser con sintaxis de CSS!! Retornará la primera coincidencia
parentElement.querySelectorAll(): Selecciona varios elemento y los devuelve, la selección se hace a través de lo que le pases entre paréntesis, y la selección puede ser con sintaxis de CSS!! Retornará un arreglo (en realidad es un NodeList)

. Como pueden ver, es muy parecido a lo que teníamos con jQuery 👀

Andrés Felipe Lopez gomez

Excelente aporte

Rolando Mamani Salas

muchas gracias por el aporte

Fernando Quinteros Gutierrez

👉 Sitio de la clase

Andrés Felipe Lopez gomez

Muchas gracias

Rolando Mamani Salas

Muchas gracias

Marianna Guedez

LEER NODOS MÉTODOS TRADICIONALES

MÉTODOS MODERNOS

Max Andy Diaz Neyra

Bonitas infografias, te quedaron muy bien. En que programa las hicistes?

Aleja Henao Espitia

Para que no te sientas perdido: 🎁 https://getbootstrap.com/docs/4.5/examples/checkout/ esta es la página específica en la que el profe está trabajando

Fernando Quinteros Gutierrez

👀 Leer nodos

Ideas/conceptos claves

Los objetos NodeList son colecciones de nodos como los devueltos por propiedades como Node.childNodes y el método document.querySelectorAll () Aunque NodeList no es un Array, es posible iterar sobre él utilizando forEach(). También puede convertirse a un Array usando Array.from

Apuntes

Podemos usar los siguientes métodos para manipular el DOM

🔢 Para obtener el elemento por el ID

document.getElementById()

🛑 Para obtener el elemento por el nombre de la etiqueta

parent.getElementsByTagName()

🏌️‍♀️ Para obtener el elemento por el nombre de la clase

parent.getElementByClassName()

La web API ha cambiado bastante, por lo tanto, estos selectores no son recomendados cuando trabajamos con aplicaciones reales
Existen 2 alternativas para este tipo de operaciones

parentElement.querySelector("")
// tag => "div", "section"
// clases => ".class1"
// Id => "#idContenedor"

Permite seleccionar un elemento que especifiquemos en su primer argumento como una cadena o string

parentElement.querySelectorAll()

Lo usamos cuando queremos traer todos los elementos que especifiquemos y nos devuelve una nodeList

RESUMEN: Para poder leer nodos tenemos diferentes métodos brindados por el navegador, entre los mas destacados estan los de querySelector y querySelectorAll que nos permiten especificar lo que deseamos traer mediante una cadena de texto. Ademas que si nos devuelven una lista esta sera una nodeList

Andrés Felipe Lopez gomez

Excelente aporte

Rolando Mamani Salas

Excelente aporte

Santiago Lopera Naranjo

Selectores mas recomendados:

Por <tag/>

document.querySelector('div')

Por clase

document.querySelector('.contianers')

Por id

document.querySelector('#user_name')

Giselle Desiree Boyer Jimenez

No conocía estas opciones, gracias por compartir!

Rolando Mamani Salas

muchas gracias por el resumen

Rodrigo Reyes

Esta clase o curso creo tardo mucho en llegar

Hermes Aguilar

Roberto Medina

Hola que tal,

Pero lo importante es que ya llegó y está muy interesante.

Anfernee Valera

Ya desde acá me pregunto porque este curso no está mas cerca en la escuela de desarrollo Web o la de JS o la de las rutas de los frameworks/librerias

Angel David Contreras Barrios

Coincido con lo mismo compañero. En varios cursos de Js no entendía muy bien lo que hacia el profe, hasta que decidí hacer este curso.

Adrián Castillo

Que tiene de diferente en utilizar "document.getElement.." y "parent.getElement..." espeificamente entre document y parent

Carlos Eduardo Gomez García

No hay una diferencia como tal, recuerda que document es un objeto global de JavaScript que representa al documento, es decir, cualquier nodo que quieras buscar lo va a hacer desde la raíz del documento, y para ese caso se usa document tal cual.

En cambio, parent no significa nada, esa no es una variable que exista en JavaScript, sin embargo, se usa para representar que ahí puede ir cualquier elemento padre, incluyendo document ya que este también es un elemento padre. Por ejemplo, podrías usar document.getElement... para buscar desde el nodo raíz, o suponiendo que tienes una variable llamada div que contenga un elemento div, podrías usar div.getElement...

En resumen parent.getElement... es solo una forma de representar que ahí puede ir cualquier nodo padre desde el cuál se empezará a buscar :D

Jonathan 🦑 Alvarez

Profesor

Gracias @RetaxMaster! Muy buena explicación :D

Janet Guadalupe Torres Ménera

¿Cómo le hace para tener dos consolas?

Jonathan 🦑 Alvarez

Profesor

Hola Janet!

A cuáles dos te refieres?

Si es a la que aparece desde la parte inferior de los DevTools, se abre presionando ESC o manualmente arrastrando la pestaña inferior hasta abrirla.

Si responde a tu pregunta? :D

Luis Gabriel Cazzullo

Siempre usé querySelector y querySelectorAll. Pero, no entiendo por qué son preferibles a los otros.

Marcelo Daniel Yudis

Porque nos da mucha versatilidad al buscar los elementos :D

Jiovanni Romo

Como comentó Marcelo, querySelector y querySelectorAll nos permiten tener mayor versatilidad y especificidad a la hora de buscar distintos elementos, podemos usar nodeNames, clases CSS, ID's, etc. Mientras que en otros no, o usamos solo clases o solo id's.

David Daniel Castillo Nava

Link de ejemplo de Boostrap

//Obtienes por nombre de id el elemento
let getById = document.getElementById("id"); 
//Obtienes por nombre de tag el elemento
let getByTag = parent.getElementByTagName("tagname"); 
//Obtienes por el nombre de clase el elemento
let getByClass = parent.getElementByClassName("classname"); 
//Obtiene el primer elemento que cumpla el selector pasado
let getByQuery = parent.querySelector(".classname #id o selector formar un selector de regla css");
//Obtiene todos los elementos que cumpla el selector pasado
let getByQueryAll = partent.querySelectorAll(".classname #id o selector formar un selector de regla css");

Anggi Vanesa Pallares Solis

Martin Lazzeri

por que no es recomendado utilizar los getElement... y sí es recomendado usar los querySelector?

David Granados

Aunque no se porque es recomendado el querySelector la diferencia es el tipo de objetos que retorna cada una, por acá hay un artículo que los explica bastante bien con ejemplos.

Jenny Aguilar

Cada semana por medio aprox me paso por este post, esperando que alguien lo responda, porque estoy bastante intrigada también sobre por qué NO es recomendado los getElement...

Alfonso Aguilar Grimaldo

¿Siempre vamos a usar el parent o el document para leer los nodos? ¿o hay excepciones?

Daniel Adolfo Ordoñez Rubio

Hola, Alfonso :) Si se trata de varios nodos, lo mejor es hacerlo desde el padre porque es el elemento común que los conecta. Si se trata de un solo nodo, puedes usar un selector como su ID o una combinación específica para el nodo que quieras tratar.

Arturo Mauricio Terceros Beltrán

Si quieres seleccionar un nodo por lo general lo realizamos desde el document para realizar la búsqueda del nodo dese la raíz.

Daniel Esteban Santos Mendez

¿Por qué no es recomendable usar ById, ByTagName y ByClassName?

Carlos Eduardo Gomez García