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)

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

👉 Sitio 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

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

• 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

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

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 (“h1”).

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 así que recomieda usar algo llamado 

querySelector```

minuto 5:40

Mis apuntes en Notion💚

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(‘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,

parent.getElementsByTagName(‘div’)
este método obtenemos un “array 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 (‘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.

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(‘id’) → para obtener un elemento por su ID
• parent.getElementByTagName(‘tag’) → para obtener por el nombre de la etiqueta
• parent.getElementsByClassName(‘class’) → 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

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

¿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(‘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” (sin la “s”) 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

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 → (‘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 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(‘input’) devolverá el primer input
Document.querySelector(’’.class") devolverá el primer elemento con la clase de css