JavaScript HTML DOM elemento

Este capítulo le explicará cómo buscar y acceder a los elementos HTML en una página HTML.

Buscar elementos HTML

Generalmente, mediante JavaScript, necesita operar con elementos HTML.

Para lograr este objetivo, primero necesita encontrar estos elementos. Hay varias formas de completar esta tarea:

  • Buscar elementos HTML mediante id
  • Buscar elementos HTML mediante nombre de etiqueta
  • Buscar elementos HTML mediante nombre de clase
  • Buscar elementos HTML mediante selector CSS
  • Buscar elementos HTML mediante colección de objetos HTML

Buscar elementos HTML mediante id

La forma más sencilla de buscar elementos HTML en el DOM es utilizando el id del elemento.

En este ejemplo, se busca el elemento con id="intro":

Ejemplo

var myElement = document.getElementById("intro");

Prueba por tu cuenta

Si se encuentra el elemento, este método devolverá el elemento como objeto (en myElement).

Si no se encuentra ningún elemento, myElement contendrá null.

Buscar elementos HTML mediante nombre de etiqueta

En este ejemplo, se buscan todos los <p> Elemento:

Ejemplo

var x = document.getElementsByTagName("p");

Prueba por tu cuenta

En este ejemplo, se busca el elemento con id="main", luego se buscan todos los elementos <p> Elemento:

Ejemplo

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Prueba por tu cuenta

Buscar elementos HTML mediante nombre de clase

Si necesita encontrar todos los elementos HTML con el mismo nombre de clase, utilice getElementsByClassName().

En este ejemplo, se devuelve la lista de elementos que contienen la clase "intro":

Ejemplo

var x = document.getElementsByClassName("intro");

Prueba por tu cuenta

Buscar elementos mediante nombre de clase no se aplica a Internet Explorer 8 y versiones anteriores.

Buscar elementos HTML mediante selector CSS

Si necesita buscar todos los elementos HTML que coinciden con un selector CSS específico (id, nombre de clase, tipo, atributo, valor de atributo, etc.), utilice querySelectorAll() métodos.

En este ejemplo, se devuelven todos los elementos con la clase "intro" <p> Lista de elementos:

Ejemplo

var x = document.querySelectorAll("p.intro");

Prueba por tu cuenta

querySelectorAll() No se aplica a Internet Explorer 8 y versiones anteriores.

Se encuentra el objeto HTML mediante selector de objetos HTML

Este ejemplo busca el elemento de formulario con id="frm1" en el conjunto forms, y muestra todos los valores de los elementos:

Ejemplo

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Prueba por tu cuenta

Los siguientes objetos HTML (y conjuntos de objetos) también son accesibles: