Los últimos tutoriales de desarrollo web
 

JavaScript Elementos DOM de HTML

❮ Anterior Siguiente Capítulo ❯

Esta página le enseña cómo encontrar y elementos de acceso HTML en una página HTML.

Elementos HTML hallazgo

A menudo, con el lenguaje Java, que desea manipular los elementos HTML.

Para ello, usted tiene que encontrar los elementos primero. Hay un par de maneras de hacer esto:

  • Encontrar los elementos HTML de id
  • Encontrar los elementos HTML de nombre de etiqueta
  • Encontrar los elementos HTML de class nombre
  • Encontrar los elementos HTML de selectores CSS
  • Encontrar los elementos HTML de colecciones de objetos HTML

Encontrar los elementos HTML mediante Id

La forma más fácil de encontrar un elemento HTML en el DOM, es mediante el uso del elemento de id .

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

Ejemplo

var myElement = document.getElementById("intro");
Inténtalo tú mismo "

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

Si no se encuentra el elemento, myElement contendrá nulo.

Encontrar los elementos HTML de Nombre de etiqueta

Este ejemplo busca todos los <p> elementos:

Ejemplo

var x = document.getElementsByTagName("p");
Inténtalo tú mismo "

En este ejemplo se encuentra el elemento con id="main" , y luego busca todos <p> elementos dentro de "main" :

Ejemplo

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Inténtalo tú mismo "

Encontrar los elementos HTML de Class Nombre

Si usted quiere encontrar todos los elementos HTML con la misma class de nombres, utilice getElementsByClassName() .

En este ejemplo se devuelve una lista de todos los elementos con class="intro" .

Ejemplo

var x = document.getElementsByClassName("intro");
Inténtalo tú mismo "

Encontrar elementos por nombre de clase no funciona en Internet Explorer 8 y versiones anteriores.

Encontrar los elementos HTML de selectores CSS

Si usted quiere encontrar todos los elementos HTML que coincide con un selector CSS especificado ( id , nombres de clases, tipos, atributos, valores de atributos, etc), utilice el querySelectorAll() método.

En este ejemplo se devuelve una lista de todos los <p> elementos con class="intro" .

Ejemplo

var x = document.querySelectorAll("p.intro");
Inténtalo tú mismo "

El querySelectorAll() método no funciona en Internet Explorer 8 y versiones anteriores.

Encontrar los elementos HTML de colecciones de objetos HTML

En este ejemplo se encuentra el elemento de formulario con id="frm1" , en la colección de formularios, 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;
Inténtalo tú mismo "

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

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »


❮ Anterior Siguiente Capítulo ❯