JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web. Permite agregar interactividad y dinamismo a las páginas web. La sigla DOM significa "Document Object Model" (Modelo de Objetos del Documento) y se refiere a la representación de la estructura de un documento HTML en forma de árbol. JavaScript interactúa con el DOM para manipular los elementos de la página, como cambiar el contenido, los estilos, agregar o eliminar elementos, manejar eventos, entre otros.
Es posible modificar los estilos de los elementos HTML usando JavaScript. Por ejemplo, puedes cambiar el color de fondo de un elemento:
const myElement = document.getElementById('myElement');
myElement.style.backgroundColor = 'red';
JavaScript permite responder a eventos, como clics del mouse o envíos de formularios. Por ejemplo, puedes agregar un listener de eventos a un botón:
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
console.log('¡Botón clicado!');
});
/* **Con Arrow Function** */
myButton.addEventListener('click', () => {
console.log('¡Botón clicado!');
});
JavaScript permite agregar y eliminar elementos del DOM. Por ejemplo, puedes agregar un nuevo elemento <li> a una lista:
const myList = document.getElementById('myList');
const newListItem = document.createElement('li');
newListItem.textContent = 'Nuevo ítem';
myList.appendChild(newListItem);
Estos son solo ejemplos básicos de cómo JavaScript interactúa con el DOM. La combinación de estos recursos permite crear páginas web interactivas y dinámicas. Existen muchos otros métodos y funciones disponibles en la API del DOM para manipular elementos HTML de maneras más avanzadas.
La función getElementById de JavaScript permite acceder a un elemento HTML específico en una página web, basándose en el valor del atributo id de ese elemento. Retorna una referencia al elemento encontrado o null si no se encuentra ningún elemento con el id proporcionado.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Ejemplo de uso de getElementById</h2>
<p id="demo">Este es un párrafo de ejemplo.</p>
<button onclick="cambiarTexto()">Haz clic aquí para cambiar el texto</button>
<script>
function cambiarTexto() {
// Obtener una referencia al elemento con id "demo"
let elemento = document.getElementById("demo");
// Cambiar el contenido del párrafo
elemento.innerHTML = "¡Texto cambiado!";
}
</script>
</body>
</html>
En este ejemplo, tenemos un párrafo con el id "demo" y un botón. Al hacer clic en el botón, se ejecuta la función cambiarTexto. Dentro de esta función, usamos getElementById para obtener una referencia al párrafo con el id "demo". Luego, modificamos el contenido de ese párrafo asignándole un nuevo texto a la propiedad innerHTML del elemento. Como resultado, el texto del párrafo cambiará a "¡Texto cambiado!" cuando se haga clic en el botón.
La función getElementByClassName permite seleccionar elementos HTML basándose en sus clases. Retorna una colección de elementos que tienen la clase especificada.