Tutorial JavaScript: Selección de elementos DOM

La selección de elementos del Document Object Model (DOM) es una tarea fundamental en JavaScript. El DOM es una interfaz de programación que representa documentos HTML y XML como un árbol de nodos y objetos. Cada parte de un documento, como elementos, atributos y texto, se convierte en un objeto en el DOM. JavaScript se usa para interactuar con el DOM para manipular el contenido, la estructura y el estilo de los documentos web.

En JavaScript, existen varias formas de seleccionar elementos del DOM:

Métodos getElement

getElementById

Este método devuelve el elemento que tiene el atributo id especificado. El valor del ID debe ser único en el documento.

let elemento = document.getElementById('miId');

getElementsByClassName

Este método devuelve una colección de todos los elementos que tienen una clase específica. Como puede haber múltiples elementos con la misma clase, este método devuelve una colección de elementos similar a un array de tipo HTMLCollection.

let elementos = document.getElementsByClassName('miClase');

// Acceder al primer elemento
let primerElemento = elementos[0];

getElementsByTagName

Este método devuelve una colección de todos los elementos que tienen el nombre de etiqueta especificado. Al igual que getElementsByClassName, devuelve una HTMLCollection.

let elementos = document.getElementsByTagName('div');

// Acceder al primer elemento
let primerElemento = elementos[0];

Métodos querySelector

Estos métodos reciben entre comillas el mismo tipo de selectores que se utilizarían en CSS.

document.querySelector(selectores)

Este método devuelve el primer elemento que coincida con los selectores CSS proporcionados. Si no encuentra ningún elemento coincidente, devuelve null.

// Obtener primer elemento de clase 'miClase'
let primerElemento = document.querySelector('.miClase');

document.querySelectorAll(selectores)

Este método devuelve una NodeList estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores CSS proporcionados.

// Obtener primer elemento <div> de clase 'miClase'
let elementos = document.querySelectorAll('div.miClase');

// Acceder al primer elemento
let primerElemento = elementos[0];

Selectores CSS

Algunos de los selectores que se pueden utilizar en los métodos querySelector y querySelectorAll incluyen:

1. Selector de tipo: Selecciona elementos basados en el nombre del elemento (ej., div, p, span). Ejemplo: document.querySelector('div').

2. Selector de clase: Selecciona elementos basados en el valor del atributo class (ej., .miClase). Ejemplo: document.querySelector('.miClase').

3. Selector de ID: Selecciona un elemento basado en el valor del atributo id (ej., #miId). Ejemplo: document.querySelector('#miId').

4. Selector de atributo: Selecciona elementos basados en la presencia o valor de un atributo (ej., [href], [target="_blank"]). Ejemplo: document.querySelector('[href]').

5. Selector descendiente: Selecciona elementos que son descendientes de otro elemento (ej., div p seleccionará todos los párrafos que están dentro de un div). Ejemplo: document.querySelector('div p').

6. Selector de hijo directo: Selecciona elementos que son hijos directos de otro elemento (ej., div > p seleccionará solo los párrafos que son hijos directos de un div). Ejemplo: document.querySelector('div > p').

7. Selector de hermano adyacente: Selecciona elementos que son hermanos adyacentes de otro elemento (ej., div + p seleccionará el primer párrafo que es hermano adyacente de un div). Ejemplo: document.querySelector('div + p').

8. Selector de pseudo-clase: Selecciona elementos basados en su estado particular (ej., :hover, :active, :first-child, :nth-child(2)). Ejemplo: document.querySelector('div:hover').

Estos selectores pueden combinarse y anidarse para seleccionar elementos más específicos.

Acceder y modificar propiedades y métodos del elemento

Una vez seleccionado el elemento del DOM, se puede acceder a sus propiedades y métodos. Por ejemplo, se puede obtener o modificar su contenido de texto usando la propiedad .innerText o .textContent, y su contenido HTML usando .innerHTML.

let elemento = document.getElementById('miId');

// Obtener el contenido de texto
let texto = elemento.textContent;

// Cambiar el contenido de texto
elemento.textContent = 'Nuevo contenido';

// Obtener el contenido HTML
let html = elemento.innerHTML;

// Cambiar el contenido HTML
elemento.innerHTML = '<p>Nuevo contenido HTML</p>';

También se pueden acceder y modificar los atributos de un elemento usando los métodos .getAttribute(atributo) y .setAttribute(atributo, valor).

let elemento = document.getElementById('miId');

// Obtener el valor de un atributo
let clase = elemento.getAttribute('class');

// Establecer el valor de un atributo
elemento.setAttribute('class', 'nuevaClase');

Estos son los conceptos básicos de la selección y manipulación de elementos del DOM en JavaScript. Es importante recordar que el DOM es dinámico, lo que significa que cualquier cambio realizado con JavaScript se refleja inmediatamente en la página web.