Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Leer nodos

4/28
Recursos

Aportes 60

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

  • parent.getElementById(鈥榠d鈥) => nos permite obtener un elemento a trav茅s de su id.
    .
  • parent.getElementsByClassName(鈥榗lass鈥) => obtiene un array con todos los elementos hijos que tengan esa clase, ojo 鈥済etElementByClassName鈥 no existe, es decir no podremos obtener solo 1 elemento con esa clase.
    .
  • parent.getElementsByTagName(鈥榙iv鈥) => con este m茅todo obtenemos una lista o 鈥渁rray 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 (鈥榙iv鈥)
    .
  • 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 鈥減adre 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)

Hola, Me gustar铆a compartir un resumen de la clase 馃殌

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 馃憖

LEER NODOS
M脡TODOS TRADICIONALES

M脡TODOS MODERNOS

馃憖 Leer nodos

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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

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

Selectores mas recomendados:

Por <tag/>

document.querySelector('div')

Por clase

document.querySelector('.contianers')

Por id

document.querySelector('#user_name')

馃槃

Esta clase o curso creo tardo mucho en llegar

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

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?

Leyendo Nodos

Existen varias formas para leer nodos:

document.getElementById("firstName");

Nos permite obtener un elemento del DOM a trav茅s de su ID. Retorna un 煤nico nodo del HTML, porque solo en una p谩gina cada id debe ser 煤nico, es decir, no puede haber mas de un elemento con el mismo ID. De haber m谩s de un elemento con el mismo ID podr铆a no funcionar como se espera.

document.getElementsByTagName("span");

Nos permite obtener una lista聽(NodeList)聽con todos los nodos que tienen definida la etiqueta proporcionada. Es un m茅todo que puede traer 0, 1 o n Nodos.

document.getElementsByClassName("container");

Funciona similar al anterior, pero en este caso nos devuelve los nodos que entre sus clases contenga la especificada en el argumento del m茅todo, es decir, vamos a identificar una clase y traemos todos los elementos que contengan dicha clase.

document.querySelector(".container");

Nos permite obtener cualquier elemento del DOM de acuerdo al argumento que le indiquemos, podemos pasarle una cadena de caracteres que contiene uno o mas selectores CSS, estos deben ir separado por comas. Este m茅todo retorna el primer elemento que coincida con el filtro, es decir, si existen varios elementos que coincidan con la b煤squeda este nos retornara el primero que encuentre. Si no encuentra ning煤n elemento retorna聽null.

馃挕 Debemos especificar el s铆mbolo del selector, similar como ocurre en CSS, si queremos obtener por clase (".container"), ID (#container), etiqueta directamente (鈥渉1鈥).

document.querySelectorAll(".container");

Este m茅todo es casi igual al anterior a diferencia de que este devuelve una lista聽(NodeList)聽donde se encuentran todos los elementos que coincidan con el o los selectores indicados.

Quetal people! Les comparto mis apuntes de la clase.
En general creo que todos los m茅todos para obtener nodos son provechosos seg煤n sea el contexto.
Bye Coder!

MANIPULACION DEL DOM
Incluye 3 pasos claves:
1- Leer nodos:
飩 document.getElementById():
飩 parent.getElementByTagName():
飩 parent.getElementByClassName():
飩 parentElement.querySelector():
飩 parentElement.querySelectorAll():
2- Crear nodos:
飩 document.createElement
飩 document.createTextNode
飩 document.createAttribute
3- Agregar nodos:
飩 parentElement.appendChild()
飩 parentElement.append()
飩 parentElement.insertBefore()
飩 parentElement.insertAdjacentElement()

Aqu铆 va un aporte extra compa帽eros:

  1. Document.getElementById() : Es un metodo de Document y regresa un Element pero, 驴Qu茅 es Document y Element?
  • Document: Interfaz que representa cualquier p谩gina web cargada en el navegador y funciona como un enntry point para el contenido de la pagina web, tiene propiedades globales que ayudan por ejemplo a obtener el url de la pagina o crear nuevos elementos.

  • Element: Es la clase m谩s general de la cual un elemento del DOCUMENT hereda metodos y propiedades, generalmente cuando hablamos de los element, nos referimos a los HTMLElement pero vale la pena que sepas que los element tambien pueden ser de otros tipos como SVGElement, XULElement,etc.

Dale una revisada a detalle aqui

En resumen podemos accerder a los elementos del HTML ya sea deade un:

id
clase 
el nombre de la etiqueta


Usando la siguiente sintaxis

getElementBy**TipodeElemento
**```


El profesor, recomienda que usar eso no es buena idea y asque recomieda usar algo llamado 




querySelector```

minuto 5:40

leer nodos document

leer nodos query

Para leer Nodos:

document.querySelector();
document.querySelectorAll();

Leer nodos con DOM

- El primero es **document.getElementById()**, este traer谩 el elemento HTML que coinicida ccon el id especificado, este retoranr谩 un solo elemento, ya que, la propiedad id es 煤nica entre todos los elementos HTML.


- El segundo es **document.getElementByTagName()**  trae todos los elementos HTML cuyas etiquetas sean del nombre especificado.


- El tercero es **document.getElementByClassName()** trae los elementos HTML cuyo nombre de clase coincida con el especificado, las clases son el atributo de una etiqueta HTML que vincula con estilos.


- El cuarto es **document.querySelector()** trae el elemento HTML que coincidada tanto como el id o el nombre de la etiqueta o el nombre de la clase, aunque pueden haber muchas coincidencias, este comando trae el primero que encuantra, Este si requiere especificar el nombre con alg煤n selector CSS. Este poderoso comando admite todo tipo de parametros,  que sean aplicables en CSS. 


- El quinto es **document.querySelectorAll()** lo mismo que **document.querySelector()**, pero con la diferencia que este comando trae todos los elementos  HTML que encuentra.

Comparto el codigo generado mientras estoy viendo el curso, espero les sirva de ayuda鈥

https://github.com/fmbetancourt/course-platzi--dom/commit/de91d56c36d5813b5ae40728b4241e5b4daa445b

Es importante que se tome en cuenta que los m茅todos getElementsByTagName y getElementsByClassName retornan HTMLCollection mientras que querySelectorAll renotrna un node list. Esto es importante diferenciarlo ya que dependiendo de lo que queremos hacer pueden devolver datos disitntos.

Aqu铆 dejo m谩s informaci贸n sobre las diferencias

exeente

para mi querySelector es todo, como asi que tiene un problemita

Tambi茅n es recomendable usar data attributes.

Ejemplo:

<div data-js-container></div>
document.querySelector('[data-js-container]');

Ahora entiendo un poco mas el uso de querySelector en ves de getElementById, y es que supongo que el querySelector nos permite ser m谩s espec铆ficos en la selecci贸n de selectores, ya que se puede dar el caso que en un archivo tenga dos clases con el mismo nombre pero yo quiera aplicarle efectos solo a una de las dos, con el getElementsByClassName se seleccionar谩n 茅stas dos, mientras que con el querySelector lo har谩 solo a una de ellas, ya que por definici贸n este me devuelve el primer valor que coincida

La diferencia entre HTMLCollection vs NodeList:
NodeList tiene m谩s m茅todos.
NodeList puede ser live o static, en cambio, HTMLCollection es siempre live.
NodeList puede tener m谩s info que solo los elementos, ya que contiene nodos.
La semejanza:
Ambos son Array like.
Ambos son una colecci贸n de 铆tems.
Pueden entender mejor del tema en este v铆deo.

document.getElementByID()
document.getElementByTagName()
document.getElementByClassName()
document.querySelector()
document.querySelectorAll()

Podr铆amos realizar un selector al estilo jQuery de la siguiente manera.

//creando la funcion $
const $=q=>document.querySelector(q);

//utilizandolo
const btnGuardar=$('#btn-guardar')

Cabe resaltar que los m茅todos selectores pueden usarse con cualquier elemento, no solo con document

<form id="form1">
  <input id="input" />
</form>

<form id="form2">
  <input id="input" />
</form>
document.querySelectorAll('#input') // [input, input]

const form = document.getElementById('form1')
form.querySelectorAll('#input') // [input]

querySelector()

querySelector() nos permite elegir elementos usando los selectores CSS, es decir nos permite discriminar y ser espec铆ficos en el elemento que estamos seleccionando.

<div class='muted'>
	<small class='muted'>This text is muted styled</small>
    <span class='muted'>This is other text is muted styled too</span>
</div>

Si usamos document.querySelector('.muted') nos devolver谩 el primero que encuentre, es decir: <div class='muted'>...</div>' , sin embargo podemos ser mas espec铆ficos al hacer uso del querySelector() , por ejemplo podemos usar document.querySelector('span.muted'), en este caso nos devolver谩 <span class='muted'>鈥</span>

馃槷 Excelente Clase, no conoc铆a lo de los queryselector 馃槂

Leer nodos

Para leer nodos podemos hacerlos de 3 formas:

document.getElementById //Llamamos el elemento html que contenga cierto ID
parent.getElementByTagName //llamamos todos los elementos de cierto TagName
parent.getElementByClassName //llamamos todos los elementos que tenga cierta clase

Aunque estos selectores son el pilar de la web, La web APIs ha cambiado y evolucionaron dando como resultado una forma mucho mas moderna a la hora de manipular el DOM.

parentElement.querySelector //Llama al primer elemento seg煤n el selector.
parentElement.querySelectorAll //Llama todos los elementos seg煤n el selector.

En la gran mayor铆a de aplicaciones usa estos selectores que otorga mayor facilidad y flexibilidad.

Hoy en d铆a tambien se pueden utilizar

document.querySelector('#me')
document.querySelector('.me')
document.querySelectorAll('h1')

LEER NODOS DEL DOM

parent.getElementById(鈥榠d鈥)
nos permite obtener un elemento a trav茅s de su id.

parent.getElementsByClassName(鈥榗lass鈥)
obtiene un array con todos los elementos hijos que tengan esa clase,

parent.getElementsByTagName(鈥榙iv鈥)
este m茅todo obtenemos un 鈥渁rray list鈥 con todos los elementos que tengan esa etiqueta,
Al igual que con el m茅todo anterior no hay posibilidad de usarlo en singular, siempre tendremos que usar getElements

parent.querySelector()
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 (鈥榙iv鈥)

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 鈥減adre 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.

Siempre he usado los otros 3, pero veo que con el querySelectorAll tengo todo en uno.

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)

RESUMEN

Para poder leer un NODO necesitamos funciones que son las mas importantes de JS:

  • document.getElementById(鈥榠d鈥) 鈫 para obtener un elemento por su ID
  • parent.getElementByTagName(鈥榯ag鈥) 鈫 para obtener por el nombre de la etiqueta
  • parent.getElementsByClassName(鈥榗lass鈥) 鈫 para obtener por el nombre de la clase

Si hacemos esto en consola podemos ver la informacion de los elementos que traigamos con estos metodos, recordemos que con ID solo puede ser 1 element, en TAG seran ser muchos y en CLASS puede ser 1 o mas.

Cuando usamos la Clase no necesitamos poner un 鈥.鈥 como en CSS. El solo nombre esta bien.

La WEBAPI a cambiado mucho y a evolucionado. Estos selectores no es muy conveniente cuando trabajamos en aplicaciones reales. Existen otros dos funciones que son mejor utilizar, que son:

  • parentElement.querySelector:

Es un selector que nos dejara elegir o seleccionar desde el DOM cualquier cosa que especifiquemos dentro del primer argumento de forma de cadena. Esto si se utiliza de la forma de CSS donde utilizamos 鈥#鈥, 鈥.class鈥 y si elegimos una etiqueta, este solo nos traera 1 ELEMENTO, que sera EL PRIMERO QUE SE ENCUENTRE. Cualquier selector de CSS es valido.

  • parentElement.querySelectorAll :

Sirve de igual forma que el querySelector pero la diferencia es que esta si nos traera TODOS LOS ELEMENTOS, no solo 1.

Excelente clase me sirvi贸 para desatrancar conocimientos dispersos y tener una visi贸n m谩s clara

En conclusi贸n, se recomienda el uso de:

parentElement.querySelector
parentElement.querySelectorAll

para leer los nodos del DOM.
querySelector acepta cualquier selector valido en CSS

<h3>Operaciones b谩sicas</h3> <h4>Leer nodos</h4>
document.getElementById('id');
document.getElementsByTagName('tagName');
document.getElementsByClassName('className');

No es muy conveniente usar estos selectores cuando usamos apps reales.

document.querySelector('selector'); //Est谩 muy ligado con los selectores de CSS
document.querySelectorAll('selector');

Pero estos 2 son mucho mejores, nos dar谩n la mayor flexibilidad y beneficio cuando estemos manipulando el DOM.

驴Cu谩l es la ventaja de usar querySelector por encima de getElementBy鈥?

Es por ello que nunca se debe parar de aprender, solo conoc铆a los primeros 3 selectores brindados. Es notable como los querySelector permiten trabajar de una forma m谩s c贸moda.

Esto les puede ayudar a saber d贸nde est谩n parados

.

  • document.getElementById, Obtiene el elemento por Id.
  • parent.getElementsByClassName, Obtiene los elementos por clase.
  • parent.getElementsByTagName, Obtiene los elementos por etiqueta.
  • parent.querySelector, obtiene el primer el elemento dependiendo del id, clase o etiqueta, la sintaxis es igual que los css selector
  • parent.querySelectorAll. obtiene todos los elementos dependiendo del id, clase o etiqueta.

Genial

Excelente curso, de verdad es muy importante aprender a manipular el DOM. creo que deberia estar mucho antes que otros cursos de la carrera. 馃挭馃徑馃挭馃徑馃挭馃徑馃挭馃徑

驴Entonces cu谩l seria el mas eficiente? 馃

馃憣

Diferencia entre .querySelector y .querySelectorAll

document.querySelector("input") // devuelve solo el primer elemento que encuentre con esta etiqueta, es decir 1 solo nodo

document.querySelectorAll("input") //devolver谩 en este caso para ser exactos una lista con 17 nodos que tienen esta misma etiqueta ```
document.getElementById("firstName") //devuelve solo un dato porque el id es 煤nico  
document.getElementsByTagName("input") //devuelve 1 o m谩s porque hay varias etiquetas iguales

Resumen realizado con resumenes de estudiantes de este curso, mas unas mejoras de mi parte:

Leer nodos

Para leer nodos usaremos:

  • parent.getElementById(鈥榠d鈥) 鈫 Nos permite obtener un elemento a trav茅s de su id.
  • parent.getElementsByClassName(鈥榗lass鈥) 鈫 Obtiene un array con todos los elementos hijos que tengan esa clase, ojo 鈥済etElementByClassName鈥 (sin la 鈥渟鈥) no existe, es decir no podremos obtener solo 1 elemento con esa clase.
  • parent.getElementsByTagName(鈥榙iv鈥) 鈫 Con este m茅todo obtenemos una lista o 鈥渁rray 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

Existen Otros 2 mas poderosos que los usan la industria 馃憖 :

  • parent.querySelector() 鈫 Nos permite buscar de 3 formas: con id, clase o tagName.

    A diferencia de los 3 anteriores este nos devuelve 1 solo elemento, el primero que contenga el valor que se le paso asi hayan mas, solo devolver谩 1 siempre.

    • Id 鈫 (鈥#id鈥)
    • class 鈫 (鈥.class鈥) // aqu铆 si lleva el punto a diferencia de los 3 anteriores formas de leer los nodos.
    • tagName 鈫 (鈥榙iv鈥)
  • 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 鈥減adre o parent鈥 es igual a 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)

Resumen: En la gran mayor铆a de aplicaciones, query.selector y query.selectorAll son los selectores usados por al industria y nos dar谩n mayor flexibilidad y el mayo beneficio cuando se manipula el DOM.

			Diferencias entre **getElement **y **querySelector**

getElementById() tienes que hacer referencia a un elemento que tenga un id 煤nico.
querySelector() te devolver谩 el** primer elemento** que cumpla la condici贸n que especifiques.

Ejemplos:
Document.querySelector(鈥榠nput鈥) devolver谩 el primer input
Document.querySelector(鈥欌.class") devolver谩 el primer elemento con la clase de css