Elementos HTML DOM de JavaScript
Esta página le enseña cómo encontrar y acceder a elementos HTML en una página HTML.
Encontrar elementos HTML
A menudo, con JavaScript, desea manipular elementos HTML.
Para hacerlo, primero tienes que encontrar los elementos. Hay varias maneras de hacer esto:
- Encontrar elementos HTML por ID
- Encontrar elementos HTML por nombre de etiqueta
- Encontrar elementos HTML por nombre de clase
- Encontrar elementos HTML mediante selectores CSS
- Encontrar elementos HTML por colecciones de objetos HTML
Encontrar elemento HTML por ID
La forma más fácil de encontrar un elemento HTML en el DOM es utilizando la identificación del elemento.
Este ejemplo encuentra el elemento con id="intro"
:
Ejemplo
const element = document.getElementById("intro");
Si se encuentra el elemento, el método devolverá el elemento como un objeto (en el elemento).
Si no se encuentra el elemento, el elemento contendrá null
.
Búsqueda de elementos HTML por nombre de etiqueta
Este ejemplo encuentra todos los <p>
elementos:
Ejemplo
const element = document.getElementsByTagName("p");
Este ejemplo encuentra el elemento con id="main"
y luego encuentra todos los <p>
elementos dentro "main"
:
Ejemplo
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Encontrar elementos HTML por nombre de clase
Si desea encontrar todos los elementos HTML con el mismo nombre de clase, use
getElementsByClassName()
.
Este ejemplo devuelve una lista de todos los elementos con class="intro"
.
Ejemplo
const x = document.getElementsByClassName("intro");
Búsqueda de elementos HTML mediante selectores de CSS
Si desea encontrar todos los elementos HTML que coincidan con un selector CSS específico (id, nombres de clase, tipos, atributos, valores de atributos, etc.), use el querySelectorAll()
método.
Este ejemplo devuelve una lista de todos los <p>
elementos con class="intro"
.
Ejemplo
const x = document.querySelectorAll("p.intro");
Búsqueda de elementos HTML por colecciones de objetos HTML
Este ejemplo encuentra el elemento de formulario con id="frm1"
, en la colección de formularios, y muestra todos los valores de los elementos:
Ejemplo
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
También se puede acceder a los siguientes objetos HTML (y colecciones de objetos):