Leer nodos
Clase 5 de 29 • Curso de Manipulación del DOM
Contenido del curso
Sebastian Gonzalez
student•
hace 5 años
Jimmy Buriticá Londoño
student•
hace 5 años
Andrés Felipe García Rendón
student•
hace 5 años
Clase 5 de 29 • Curso de Manipulación del DOM
Contenido del curso
Sebastian Gonzalez
Jimmy Buriticá Londoño
Andrés Felipe García Rendón
Alex Maldonado
Pablo Guzman
Rolando Mamani Salas
Daniloo Morales
Jonathan 🦑 Alvarez
Edgar Lopez Arroyo
Carlos Eduardo Gomez García
Andrés Felipe Lopez gomez
Rolando Mamani Salas
Fernando Quinteros Gutierrez
Andrés Felipe Lopez gomez
Rolando Mamani Salas
Marianna Guedez
Max Andy Diaz Neyra
Aleja Henao Espitia
Fernando Quinteros Gutierrez
Andrés Felipe Lopez gomez
Rolando Mamani Salas
Santiago Lopera Naranjo
Giselle Desiree Boyer Jimenez
Rolando Mamani Salas
Rodrigo Reyes
Hermes Aguilar
Roberto Medina
Anfernee Valera
Angel David Contreras Barrios
Adrián Castillo
Carlos Eduardo Gomez García
Jonathan 🦑 Alvarez
Janet Guadalupe Torres Ménera
Jonathan 🦑 Alvarez
Luis Gabriel Cazzullo
Marcelo Daniel Yudis
Jiovanni Romo
David Daniel Castillo Nava
Anggi Vanesa Pallares Solis
Martin Lazzeri
David Granados
Jenny Aguilar
Alfonso Aguilar Grimaldo
Daniel Adolfo Ordoñez Rubio
Arturo Mauricio Terceros Beltrán
Daniel Esteban Santos Mendez
Carlos Eduardo Gomez García
Bá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