T5.13 Capturando elementos¶
Carga de scripts en navegador¶
Curso Js - Andros Fenollosa -> 4 modos:
+ 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>
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
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