Leer nodos
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Leer nodos
Contenido del curso
Leer nodos
Sebastian Gonzalez
Estudiante
Jimmy Buriticá Londoño
Estudiante
Andrés Felipe García Rendón
Estudiante
Alex Maldonado
Estudiante
Pablo Guzman
Estudiante
Rolando Mamani Salas
Estudiante
Daniloo Morales
Estudiante
Jonathan 🦑 Alvarez
Profesor
Edgar Lopez Arroyo
Estudiante
Carlos Eduardo Gomez García
Profesor
Andrés Felipe Lopez gomez
EstudianteRolando Mamani Salas
Estudiante
Fernando Quinteros Gutierrez
EstudianteAndrés Felipe Lopez gomez
EstudianteRolando Mamani Salas
Estudiante
Marianna Guedez
Estudiante
Max Andy Diaz Neyra
Estudiante
Aleja Henao Espitia
EstudianteFernando Quinteros Gutierrez
EstudianteAndrés Felipe Lopez gomez
EstudianteRolando Mamani Salas
Estudiante
Santiago Lopera Naranjo
Estudiante
Giselle Desiree Boyer Jimenez
EstudianteRolando Mamani Salas
Estudiante
Rodrigo Reyes
Estudiante
Hermes Aguilar
Estudiante
Roberto Medina
Estudiante
Anfernee Valera
Estudiante
Angel David Contreras Barrios
Estudiante
Adrián Castillo
EstudianteCarlos Eduardo Gomez García
ProfesorJonathan 🦑 Alvarez
Profesor
Janet Guadalupe Torres Ménera
EstudianteJonathan 🦑 Alvarez
Profesor
Luis Gabriel Cazzullo
Estudiante
Marcelo Daniel Yudis
Estudiante
Jiovanni Romo
Estudiante
David Daniel Castillo Nava
Estudiante
Anggi Vanesa Pallares Solis
Estudiante
Martin Lazzeri
Estudiante
David Granados
Estudiante
Jenny Aguilar
Estudiante
Alfonso Aguilar Grimaldo
Estudiante
Daniel Adolfo Ordoñez Rubio
Estudiante
Arturo Mauricio Terceros Beltrán
Estudiante
Daniel Esteban Santos Mendez
EstudianteCarlos Eduardo Gomez García
ProfesorBásicamente tenemos 4 formas de leer nodos con JS: . .
Muy bien explicado, gracias.
Muchas gracias por compartir tus apuntes. Saludos
Esto debería estar entre los más votados
Muy buen aporte muchas gracias
Hola, Me gustaría compartir un resumen de la clase 🚀
Ay pero que bello
Que buen resumen!!! :D
Desde JavaScript podemos leer nodos, tenemos 3 formas de hacerlo: .
document.getElementById(): Obtiene un elemento por su IDparent.getElementByTagName(): Retorna un arreglo (realmente es un HTMLCollection) con todos los resultados coincidentes por el nombre de su etiquetaparent.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 coincidenciaparentElement.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 👀
Excelente aporte
muchas gracias por el aporte
👉 Sitio de la clase
Muchas gracias
Muchas gracias
LEER NODOS MÉTODOS TRADICIONALES
Bonitas infografias, te quedaron muy bien. En que programa las hicistes?
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
👀 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
🔢 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()
parentElement.querySelector("") // tag => "div", "section" // clases => ".class1" // Id => "#idContenedor"
parentElement.querySelectorAll()
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
Excelente aporte
Excelente aporte
Selectores mas recomendados:
Por <tag/>
document.querySelector('div')
Por clase
document.querySelector('.contianers')
Por id
document.querySelector('#user_name')
:D
No conocía estas opciones, gracias por compartir!
muchas gracias por el resumen
Esta clase o curso creo tardo mucho en llegar
x2
Hola que tal,
Pero lo importante es que ya llegó y está muy interesante.
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
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.
Que tiene de diferente en utilizar "document.getElement.." y "parent.getElement..." espeificamente entre document y parent
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
Gracias @RetaxMaster! Muy buena explicación :D
¿Cómo le hace para tener dos consolas?
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
Siempre usé querySelector y querySelectorAll. Pero, no entiendo por qué son preferibles a los otros.
Porque nos da mucha versatilidad al buscar los elementos :D
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.
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");
por que no es recomendado utilizar los getElement... y sí es recomendado usar los querySelector?
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.
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...
¿Siempre vamos a usar el parent o el document para leer los nodos? ¿o hay excepciones?
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.
Si quieres seleccionar un nodo por lo general lo realizamos desde el document para realizar la búsqueda del nodo dese la raíz.
¿Por qué no es recomendable usar ById, ByTagName y ByClassName?
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