Leer nodos

Clase 5 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Sebastian Gonzalez

student•

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

student•

Muy bien explicado, gracias.

Andrés Felipe García Rendón

student•

Muchas gracias por compartir tus apuntes. Saludos

Alex Maldonado

student•

Pablo Guzman

student•

Esto debería estar entre los más votados

Rolando Mamani Salas

student•

Muy buen aporte muchas gracias

Daniloo Morales

student•

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

Jonathan 🦑 Alvarez

teacher•

Ay pero que bello

Edgar Lopez Arroyo

student•

Que buen resumen!!! :D

Carlos Eduardo Gomez García

teacher•

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

student•

Excelente aporte

Rolando Mamani Salas

student•

muchas gracias por el aporte

Fernando Quinteros Gutierrez

student•

👉 Sitio de la clase

Andrés Felipe Lopez gomez

student•

Muchas gracias

Rolando Mamani Salas

student•

Muchas gracias

Marianna Guedez

student•

LEER NODOS MÉTODOS TRADICIONALES

MÉTODOS MODERNOS

Max Andy Diaz Neyra

student•

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

Aleja Henao Espitia

student•

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

student•

👀 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

student•

Excelente aporte

Rolando Mamani Salas

student•

Excelente aporte

Santiago Lopera Naranjo

student•

Selectores mas recomendados:

Por <tag/>

document.querySelector('div')

Por clase

document.querySelector('.contianers')

Por id

document.querySelector('#user_name')

Giselle Desiree Boyer Jimenez

student•

No conocía estas opciones, gracias por compartir!

Rolando Mamani Salas

student•

muchas gracias por el resumen

Rodrigo Reyes

student•

Esta clase o curso creo tardo mucho en llegar

Hermes Aguilar

student•

Roberto Medina

student•

Hola que tal,

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

Anfernee Valera

student•

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

student•

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

student•

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

Carlos Eduardo Gomez García

teacher•

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

teacher•

Gracias @RetaxMaster! Muy buena explicación :D

Janet Guadalupe Torres Ménera

student•

¿Cómo le hace para tener dos consolas?

Jonathan 🦑 Alvarez

teacher•

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

student•

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

Marcelo Daniel Yudis

student•

Porque nos da mucha versatilidad al buscar los elementos :D

Jiovanni Romo

student•

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.

Mariel Gonzalez Yescas

student•

https://getbootstrap.com/docs/4.5/examples/checkout/

David Daniel Castillo Nava

student•

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

student•

Martin Lazzeri

student•

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

David Granados

student•

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

student•

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

student•

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

Daniel Adolfo Ordoñez Rubio

student•

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

student•

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

student•

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

Carlos Eduardo Gomez García

teacher•

En ningún momento se dijo que no sean recomendables, solo no son muy convenientes, ya que son muy específicos, usando document.querySelector tienes mucha más flexibilidad :D

Leer nodos

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones