Consultando el DOM con getElementById y querySelector

Cuando nos mencionan performance hay que entender HTMLcollection vs NodeList: 1. **HTMLCollection** * Es una colección de elementos que se actualiza dinámicamente, es decir, refleja automáticamente (en tiempo real) cualquier cambio en el DOM. * Se obtiene mediante `getElementsByTagName`, `getElementsByClassName`,` children`. 2. NodeList * Es una colección de nodos, que puede incluir elementos y otros tipos de nodos (como texto). * Se obtiene mediante métodos como con `childNodes`, `document.createNodeIterator()` que si son dinámicos. Y con `querySelectorAll` que **NO** es dinámico por lo cual los cambios realizados no se actualizan en tiempo real en el DOM. Se debe evaluar el contexto para decidir cuál usar: * Usa `HTMLCollection` cuando necesitas que la colección se actualice automáticamente con los cambios en el DOM. * Usa `querySelectorAll` cuando una `NodeList` estática sea suficiente.

Diego explica tan bien! Un crack!

Agradezco tanto que el profesor Diego utilice la consola del navegador como herramienta 🚀 Acostumbrarse a utilizarla es un superpoder desde mi punto de vista. ```js //Trae un solo elemento document.getElementById('app-id') document.querySelector('#app-title') document.querySelector('p') //Trae todos los elementos document.getElementsByClassName('menu-items') document.getElementsByTagName('p') document.querySelectorAll('.menu-items') ```

# El método querySelector No es necesario usar siempre el símbolo # para seleccionar elementos con querySelector en JavaScript. El símbolo # se utiliza específicamente cuando queremos seleccionar un elemento por su ID. ## ¿Cuándo se usa qué? **# (id):** Se utiliza para seleccionar un elemento único en el documento. Por ejemplo, `document.querySelector("#miElemento")` seleccionará el elemento con el ID "miElemento". **. (clase):** Se utiliza para seleccionar todos los elementos que comparten una clase en particular. Por ejemplo, `document.querySelector(".miClase")` seleccionará el primer elemento con la clase "miClase". **Elemento:** Puedes seleccionar un elemento por su nombre de etiqueta. Por ejemplo, `document.querySelector("p")` seleccionará el primer párrafo del documento. **Combinaciones:** Puedes combinar selectores para ser más específicos. Por ejemplo, `document.querySelector("div.miClase")` seleccionará el primer elemento div que tenga la clase "miClase". ### Ejemplo: HTML `` JavaScript `// Seleccionar por ID` `const elementoDiv = document.querySelector("#miDiv"`); `// Seleccionar por clase` `const primerElementoConClase = document.querySelector(".miClase"`); `// Seleccionar el primer párrafo` `const primerParrafo = document.querySelector("p"`); ## ¿Por qué usar querySelector? Flexibilidad: Permite seleccionar elementos de diversas formas, utilizando selectores CSS. Eficiencia: Es una forma rápida y sencilla de acceder a elementos del DOM. Versatilidad: Se puede utilizar para manipular el DOM, agregar o eliminar elementos, cambiar estilos, etc. ## ¿Cuándo usar querySelectorAll? Si necesitas seleccionar múltiples elementos que coincidan con un selector, utiliza querySelectorAll. Este método devuelve una NodeList, que es similar a un array de elementos. **En resumen** querySelector es una herramienta poderosa en JavaScript para interactuar con el DOM. Al entender los diferentes tipos de selectores, puedes seleccionar elementos de manera precisa y eficiente. ### Ejemplo adicional: Si quisieras seleccionar todos los elementos con la clase "miClase", utilizarías: `const todosLosElementosConClase = document.querySelectorAll(".miClase"`); Esto te devolvería una NodeList con todos los elementos que tengan esa clase. # Los métodos getElementById y getElementsBy... en JavaScript: getElementById vs. getElementsBy... getElementById ## ¿Para qué sirve? Como ya hemos visto, `getElementById` se utiliza para seleccionar un único elemento del DOM basado en su atributo ID. Este atributo debe ser único dentro del documento HTML. Sintaxis: `document.getElementById("id_del_elemento"`); ### Ejemplo: HTML `` JavaScript `const miDiv = document.getElementById("miDiv"`); ## Cuándo usarlo: Cuando sabes que el elemento que buscas tiene un ID único y quieres acceder a él directamente. Cuando necesitas manipular un solo elemento con un ID específico. getElementsBy... ## ¿Para qué sirven? Los métodos que empiezan con `getElementsBy` se utilizan para seleccionar colecciones de elementos del DOM basados en diferentes criterios: **getElementsByTagName:** Selecciona todos los elementos con una etiqueta determinada. **getElementsByClassName:** Selecciona todos los elementos con una clase determinada. **getElementsByName:** Selecciona todos los elementos con un atributo name determinado. Sintaxis: `document.getElementsByTagName("tag"`); `document.getElementsByClassName("clase"`); `document.getElementsByName("nombre"`); Ejemplos: `` `` `<input name="miInput" type="text">` JavaScript `// Seleccionar todos los elementos div` `const todosLosDivs = document.getElementsByTagName("div"`); `// Seleccionar todos los elementos con la clase "miClase"` `const elementosConMiClase = document.getElementsByClassName("miClase"`); `// Seleccionar todos los elementos con el nombre "miInput"` `const elementosConMiNombre = document.getElementsByName("miInput"`); ## Cuándo usarlos: Cuando necesitas trabajar con múltiples elementos que comparten una característica en común (etiqueta, clase o nombre). Cuando quieres realizar operaciones en grupo sobre estos elementos (por ejemplo, cambiar el estilo de todos los elementos con una clase determinada). Importante: Los métodos getElementsBy... devuelven una HTMLCollection, que es similar a un array pero no tiene todos los métodos de un array. Si modificas el DOM después de obtener una HTMLCollection, esta no se actualizará automáticamente.

Excelente clase! así deben enseñar al grano, sin rodeos. Gracias profe!

Me resulta más simple como programador utilizar el `querySelector `ya que así no tengo que recordar cada una de las variantes del `getElement `y resulta más simple. Igual el performance es algo que hay que tener bien en cuenta.

`document.getElementById` es más rápido y específico, ya que busca elementos por su ID único, mientras que `document.querySelector` es más flexible, permitiendo seleccionar elementos utilizando cualquier selector CSS, pero puede ser un poco más lento. Si solo necesitas un elemento por su ID, usa `getElementById`. Si necesitas seleccionar por clase, etiqueta o un selector más complejo, opta por `querySelector`. Ambas son útiles dependiendo del contexto y requerimientos de tu proyecto.

Los elementos `<menu>` y [`

`](https://developer.mozilla.org/es/docs/Web/HTML/Element/ul) representan una lista desordenada de elementos. La diferencia clave es que [`
`](https://developer.mozilla.org/es/docs/Web/HTML/Element/ul) contiene principalmente elementos para mostrar, mientras que `<menu>` estaba destinado a elementos interactivos. El elemento [`<menuitem>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element "Esta página está disponible solo en inglés") relacionado ha quedado obsoleto. <https://developer.mozilla.org/es/docs/Web/HTML/Element/menu>

Espero entender agradezco su buena disposición de enseñar es lo máximo


📌**Diferencias entre HTML COLLECTION y NODELIST**   🔴🔴 Una de las principales diferencias es que al intentar utilizar el método forEach con el HTMLCollection, no se podía. Pero si se podía recorrela con el ciclo FOR. En cambio con un NODE LIST si se puede utilizar el método de arrays forEach 

Nota: getElement(s) vs querySelector(All) en performance o velocidad, es preferible usar getElement(s)

Es bastante importante diferenciar HTMLCollention de NodeList (que son los resultados de las selecciones vistas en la clase). Ambos se pueden acceder a elementos y aplicar métodos distintos (entre otras diferencias). En el siguiente ejemplo vemos los diferentes resultados:  En el NodeList es un array donde cada posición es un elemento seleccionado en HTML (en este ejemplo botones) lo cual permite utilizar forEach para iterarlos. A diferencia de esto el segundo resultado es una HTMLCollection que devuelve un objeto (en este caso con 1 solo elemento). Que para ser accedido se tiene que utilizar el índice \[0] ej. constDondeFueGuardada\[0] // resultado de la imagen. Cuadro comparativo con diferencias: 

La performance es crucial al momento de crear código porque afecta directamente la eficiencia y la experiencia del usuario. Un código bien optimizado puede reducir el tiempo de carga, mejorar la capacidad de respuesta y disminuir el consumo de recursos, lo que resulta en una aplicación más rápida y fluida. Además, un código eficiente es más fácil de mantener y escalar.

\# El método querySelector No es necesario usar siempre el símbolo # para seleccionar elementos con querySelector en JavaScript. El símbolo # se utiliza específicamente cuando queremos seleccionar un elemento por su ID. \## ¿Cuándo se usa qué?\*\*# (id):\*\* Se utiliza para seleccionar un elemento único en el documento. Por ejemplo, `document.querySelector("#miElemento")` seleccionará el elemento con el ID "miElemento". \*\*. (clase):\*\* Se utiliza para seleccionar todos los elementos que comparten una clase en particular. Por ejemplo, `document.querySelector(".miClase")`  seleccionará el primer elemento con la clase "miClase". \*\*Elemento:\*\* Puedes seleccionar un elemento por su nombre de etiqueta. Por ejemplo, `document.querySelector("p")` seleccionará el primer párrafo del documento. \*\*Combinaciones:\*\* Puedes combinar selectores para ser más específicos. Por ejemplo, `document.querySelector("div.miClase")` seleccionará el primer elemento div que tenga la clase "miClase".  ### Ejemplo:HTML```html\```JavaScript```javascript*// Seleccionar por ID*const elementoDiv = document.querySelector("#miDiv"); *// Seleccionar por clase*const primerElementoConClase = document.querySelector(".miClase"); *// Seleccionar el primer párrafo*const primerParrafo = document.querySelector("p");``` \## ¿Por qué usar querySelector?Flexibilidad: Permite seleccionar elementos de diversas formas, utilizando selectores CSS.Eficiencia: Es una forma rápida y sencilla de acceder a elementos del DOM.Versatilidad: Se puede utilizar para manipular el DOM, agregar o eliminar elementos, cambiar estilos, etc. \## ¿Cuándo usar querySelectorAll?Si necesitas seleccionar múltiples elementos que coincidan con un selector, utiliza querySelectorAll. Este método devuelve una NodeList, que es similar a un array de elementos. \*\*En resumen\*\*querySelector es una herramienta poderosa en JavaScript para interactuar con el DOM. Al entender los diferentes tipos de selectores, puedes seleccionar elementos de manera precisa y eficiente. \### Ejemplo adicional:Si quisieras seleccionar todos los elementos con la clase "miClase", utilizarías: ```javascriptconst todosLosElementosConClase = document.querySelectorAll(".miClase");```Esto te devolvería una NodeList con todos los elementos que tengan esa clase. \-------------------------------------------------------- \# Los métodos getElementById y getElementsBy... en JavaScript: getElementById vs. getElementsBy...getElementById \## ¿Para qué sirve? Como ya hemos visto, `getElementById` se utiliza para seleccionar un único elemento del DOM basado en su atributo ID. Este atributo debe ser único dentro del documento HTML. Sintaxis: ```javascriptdocument.getElementById("id\_del\_elemento");``` \### Ejemplo: HTML```html\```JavaScript```javascriptconst miDiv = document.getElementById("miDiv");``` \## Cuándo usarlo: Cuando sabes que el elemento que buscas tiene un ID único y quieres acceder a él directamente.Cuando necesitas manipular un solo elemento con un ID específico.getElementsBy... \## ¿Para qué sirven? Los métodos que empiezan con `getElementsBy` se utilizan para seleccionar colecciones de elementos del DOM basados en diferentes criterios: \*\*getElementsByTagName:\*\* Selecciona todos los elementos con una etiqueta determinada.\*\*getElementsByClassName:\*\* Selecciona todos los elementos con una clase determinada.\*\*getElementsByName:\*\* Selecciona todos los elementos con un atributo name determinado.Sintaxis: ```javascript document.getElementsByTagName("tag");document.getElementsByClassName("clase");document.getElementsByName("nombre");``` Ejemplos: ```html\\\<input name="miInput" type="text">``` JavaScript```javascript*// Seleccionar todos los elementos div*const todosLosDivs = document.getElementsByTagName("div"); *// Seleccionar todos los elementos con la clase "miClase"*const elementosConMiClase = document.getElementsByClassName("miClase"); *// Seleccionar todos los elementos con el nombre "miInput"*const elementosConMiNombre = document.getElementsByName("miInput");``` \## Cuándo usarlos: Cuando necesitas trabajar con múltiples elementos que comparten una característica en común (etiqueta, clase o nombre).Cuando quieres realizar operaciones en grupo sobre estos elementos (por ejemplo, cambiar el estilo de todos los elementos con una clase determinada).Importante: Los métodos getElementsBy... devuelven una HTMLCollection, que es similar a un array pero no tiene todos los métodos de un array.Si modificas el DOM después de obtener una HTMLCollection, esta no se actualizará automáticamente.

Cuando utilizas `document.getElementsByTagName("p")`, estás solicitando todos los elementos `

` del DOM. Este método devuelve una colección que incluye no solo los elementos visibles, sino también propiedades adicionales, como el nodo padre, atributos y texto de los nodos. Esto es parte de la estructura del DOM, que incluye tanto elementos visuales como nodos de texto y comentarios. Es importante entender que el DOM es un modelo de objetos que representa toda la página, no solo lo que se ve.

Si tienes dos IDs repetidos en tu HTML, solo el primer elemento será seleccionado cuando utilices métodos como `getElementById`, que busca un ID específico. Esto se debe a que los IDs deben ser únicos en un documento HTML, como se menciona en el curso. Si hay IDs duplicados, puedes tener comportamientos inesperados y problemas en la manipulación del DOM. Es recomendable usar clases si necesitas seleccionar múltiples elementos similares.

Los nodos son las unidades básicas del DOM (Document Object Model). Cada elemento HTML, como etiquetas, atributos y texto, se representa como un nodo en la estructura jerárquica del DOM. Esto permite manipular la estructura y contenido de una página web mediante JavaScript.

### getElementById Nos permite seleccionar un elemento del documento por medio del valor del atributo id que se le haya asignado. ```js const titulo = document.getElementById('titulo'); console.log (titulo.innerText); // Se devuelve el texto de la etiqueta inner = interno console.log (titulo.tagName); // Devuelve la etiqueta ``` ### getElementsByClassName representa la lista de nombres de clase a buscar ```js // -------- Obtener elemento en base a su clase ------------ const toppings = document.getElementsByClassName('topping'); console.log(toppings); console.log(toppings[3]); // Acceder a un elemento especifico ``` ### getElementsByTagName Busca elementos con la etiqueta dada y devuelve una colección con ellos. ```js // -------- Obtener elemento que tenga una etiqueta en especifico ------------ let misToppings = document.getElementsByTagName('li'); console.log(misToppings); ``` ### queryselector querySelector te permite seleccionar elementos del DOM mediante a queries, es decir, si usas . seleccionas por clase, si usas # por id, si usas \[] por nombre de atributos, y así sucesivamente ```js // -------- Seleccionar un elemento en especifico ------------ let cebolla = document.querySelector('#cebolla'); console.log(cebolla); ```