Cómo obtener elementos del DOM en JavaScript

El Document Object Model (DOM) es una estructura de árbol que representa visualmente una página web y permite interactuar con ella a través de JavaScript. Una de las tareas más comunes en la programación web es la manipulación de elementos de la página, lo cual se puede realizar accediendo a ellos desde el DOM. En este artículo, aprenderás cómo obtener elementos del DOM en JavaScript y manipular su contenido.

📋 Aquí podrás encontrar✍

Tipos de Selectores
Manipulación de elementos
Ejemplos de códigos y comandos
Conclusión
Preguntas frecuentes

Tipos de Selectores

Para obtener elementos del DOM en JavaScript es necesario conocer los distintos tipos de selectores que se pueden utilizar:

Selectores por ID

Los selectores por ID son aquellos que se utilizan para buscar un elemento específico de la página a partir de su identificador único. Para utilizar este selector, se debe utilizar el método getElementById().

Este método retorna un único elemento.
Para utilizar este selector, es necesario conocer el ID del elemento.
Ejemplo:

var elemento = document.getElementById("miId");

Selectores por Clase

Los selectores por clase se utilizan para buscar elementos a partir de su clase CSS. Para utilizar este selector, se utiliza el método getElementsByClassName().

Este método retorna una lista de elementos.
Para utilizar este selector, es necesario conocer la clase del elemento.
Ejemplo:

var elementos = document.getElementsByClassName("miClase");

Selectores por Etiqueta

Los selectores por etiqueta se utilizan para buscar elementos a partir de su tipo de etiqueta, por ejemplo, "div", "p" o "img". Para utilizar este selector, se utiliza el método getElementsByTagName().

Este método retorna una lista de elementos.
Para utilizar este selector, es necesario conocer el nombre de la etiqueta del elemento.
Ejemplo:

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

Selectores por Selector de Atributos

Los selectores por selector de atributos se utilizan para buscar elementos a partir de atributos específicos. Para utilizar este selector, se utiliza el método querySelectorAll().

Este método retorna una lista de elementos.
Para utilizar este selector, es necesario conocer el atributo y su valor.
Ejemplo:

var elementos = document.querySelectorAll('[data-atributo="valor"]');

Manipulación de elementos

Una vez obtenidos los elementos del DOM, se pueden manipular para modificar su contenido o sus atributos. Los métodos más comunes para la manipulación de elementos son:

innerHTML()

El método innerHTML() permite obtener o establecer el contenido HTML de un elemento. Por ejemplo:


var elemento = document.getElementById("miId");
elemento.innerHTML = "Nuevo contenido";

getAttribute()

El método getAttribute() permite obtener el valor de un atributo específico de un elemento. Por ejemplo:


var elemento = document.getElementById("miId");
var valorAtributo = elemento.getAttribute("class");

setAttribute()

El método setAttribute() permite establecer el valor de un atributo específico de un elemento. Por ejemplo:


var elemento = document.getElementById("miId");
elemento.setAttribute("class", "nuevaClase");

Ejemplos de códigos y comandos

A continuación, se muestran algunos ejemplos de código que pueden ser utilizados para la manipulación de elementos del DOM en JavaScript:


// Obtener un elemento por ID
var elemento = document.getElementById("miId");

// Obtener una lista de elementos por clase
var elementos = document.getElementsByClassName("miClase");

// Obtener una lista de elementos por etiqueta
var elementos = document.getElementsByTagName("p");

// Obtener una lista de elementos por selector de atributos
var elementos = document.querySelectorAll('[data-atributo="valor"]');

// Modificar el contenido HTML de un elemento
elemento.innerHTML = "Nuevo contenido";

// Obtener el valor de un atributo específico de un elemento
var valorAtributo = elemento.getAttribute("class");

// Establecer el valor de un atributo específico de un elemento
elemento.setAttribute("class", "nuevaClase");

Conclusión

En este artículo, aprendiste los distintos tipos de selectores que se pueden utilizar para obtener elementos del DOM en JavaScript, así como los métodos más comunes para la manipulación de elementos. La manipulación de elementos del DOM es una tarea fundamental en la programación web, ya que permite la creación de páginas dinámicas y la interacción con el usuario. Esperamos que este artículo te haya sido útil y puedas aplicar los conocimientos adquiridos en tus proyectos.

Preguntas frecuentes

¿Por qué es importante conocer los selectores del DOM en JavaScript?

Conocer los selectores del DOM en JavaScript es fundamental para poder interactuar con los elementos de una página web y manipular su contenido. Esto permite la creación de páginas dinámicas y la interacción con el usuario.

¿Cuál es el método más común para obtener un elemento del DOM en JavaScript?

El método más común para obtener un elemento del DOM en JavaScript es getElementById(), que permite buscar un elemento a partir de su identificador único.