T5.13 Capturando elementos¶

Carga de scripts en navegador¶

El patoso: En el head <script src="app.js"></script> (Éste falla)
El clásico: Al final de body (Éste te pierde)
El pro: con DOMContentLoaded: js document.addEventListener('DOMContentLoaded', function () { // Aqui va tu código });
El moderno: con defer: <script defer src="app.js"></script>

Captura por métodos clásicos¶

Métodos de búsqueda	Descripción	Si no lo encuentra...
`.getElementById(id)`	Busca el elemento HTML por su `id`.	Devuelve .
`.getElementsByClassName(class)`	Busca elementos con la clase `class`.	Devuelve `[]`.
`.getElementsByName(value)`	Busca elementos con el atributo `name` a `value`.	Devuelve `[]`.
`.getElementsByTagName(tag)`	Busca etiquetas HTML `tag`.	Devuelve `[]`.
Fuente: DOM - Manz.dev

Captura por métodos actuales¶

Método de búsqueda	Descripción	Si no lo encuentra...
`.querySelector(sel)`	Busca el primer elemento que coincide con el selector CSS `sel`.	Devuelve .
`.querySelectorAll(sel)`	Busca todos los elementos que coinciden con el selector CSS `sel`.	Devuelve `[]`.

Propiedades de elementos HTML	Descripción	Si está vacío...
`.children`	Devuelve una lista de elementos HTML hijos.	`[]`
`.parentElement`	Devuelve el padre del elemento.
`.firstElementChild`	Devuelve el primer elemento hijo.
`.lastElementChild`	Devuelve el último elemento hijo.
`.previousElementSibling`	Devuelve el elemento hermano anterior.
`.nextElementSibling`	Devuelve el elemento hermano siguiente.
Fuente: DOM - Manz.dev

Contenido de elementos¶

Captura del contenido¶

Obtener el texto del contenido: document.querySelector(“#id”).textContent (propiedad. Obtiene incluso el texto oculto)
Obtener el contenido como texto (serializado): document.querySelector(“#id”).getHTML() (método)
NO Obtener el contenido como html: ...innerHTML

Captura del valor¶

El valor de los inputs de los formularios, mediante el atributo .value:

let nombre = document.querySelector('#nombre').value;

SEGUIDAD¶

Hay otras fórmulas para obtener el mismo resultado, pero NO las utilizaremos en ningún caso.

IMPORTANTE: El empleo de métodos y atributos diferentes a los aquí reflejados son peligrosos ya que permiten el XSS y por tanto su uso implicará automáticamente un cero en cualquier prueba.

Escritura del contenido¶

Escritura de texto en un elemento:

elemento.textContent = "Hello World!";

O para insertar algo más complejo como html deberemos hacer 2 pasos:

Métodos	Descripción	Devuelve...
`.appendChild(node)`	Añade como hijo el nodo `node`.	El nodo insertado.
`.removeChild(node)`	Elimina el nodo hijo `node`.	El nodo eliminado.
`.replaceChild(new, old)`	Reemplaza el nodo hijo `old` por `new`.	El nodo reemplazado.
`.insertBefore(new, node)`	Inserta `new` antes de `node` y como hijo del nodo actual.	El nodo insertado.
`.insertBefore(new,` `)`	Inserta `new` tras el último nodo hijo. Equivale a `.appendChild()`.	El nodo insertado.
`.moveBefore()`	Idéntico a `insertBefore()`, manteniendo el estado del elemento.
Fuente: Manz.dev

IMPORTANTE: El empleo de métodos y atributos diferentes a los aquí reflejados son peligrosos ya que permiten el XSS y por tanto su uso implicará automáticamente un cero en cualquier prueba.

Protección frente a XSS¶

XSS o cross-side scripting...

// Malo: inyección HTML directa
elemento.innerHTML = userInput;

// Bueno: usar textContent
elemento.textContent = userInput;
// o sanitizar
elemento.innerHTML = DOMPurify.sanitize(userInput);

Resumen: Seguridad y Rendimiento en Manipulación de Contenido

Conceptos Principales:

textContent es rápido, seguro y adecuado para el 90% de casos

innerText provoca reflows porque considera estilos CSS

innerHTML parsea HTML y elimina event listeners existentes

XSS no solo viene de