Elementos DOM de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

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 debes encontrar los elementos. Hay varias formas 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 sencilla 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");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

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

Si no se encuentra el elemento, el elemento contendrá null.

Encontrar elementos HTML por nombre de etiqueta

Este ejemplo encuentra todos los elementos <p>:

Ejemplo

const element = document.getElementsByTagName("p");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

Este ejemplo encuentra el elemento con id="main" y luego busca todos los elementos <p> dentro de "main":

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

Encontrar elementos HTML por nombre de clase

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

Este ejemplo devuelve una lista de todos los elementos con class="intro".

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Encontrar elementos HTML mediante selectores CSS

Si desea encontrar todos los elementos HTML que coincidan con un selector CSS específico (id, nombres de clases, tipos, atributos, valores de atributos, etc.), utilice el método querySelectorAll().

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Encontrar elementos HTML por colecciones de objetos HTML

Este ejemplo encuentra el elemento de formulario con id="frm1", en los formularios colección y muestra todos los elementos valores:

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;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

<p id="demo"></p>

<script>
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;
</script>

</body>
</html>

También se puede acceder a los siguientes objetos HTML (y colecciones de objetos):

    documento.anclajes

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.anchors</h2>

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>


</body>
</html>

    documento.cuerpo

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

    documento.documentElement

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

    documento.embeds

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

</body>
</html>

    documento.formularios

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form> 

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>

</body>
</html>

    cabeza de documento

    <!DOCTYPE html>
<html>

<head>
<title>W3Schools Demo</title>
</head>

<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
document.head;
</script>

</body>
</html>

    documento.imagenes

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.images</h2>

<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>

</body>
</html>

    enlaces.documento

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.links</h2>

<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>

</body>
</html>

    documento.scripts

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.scripts</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>

</body>
</html>

    titulo del documento

    <!DOCTYPE html>
<html>
  <head>
  <title>W3Schools Demo</title>
  </head>
<body>

<h2>Finding HTML Elements Using document.title</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>

</body>
</html>