W3Docs

Apariencia

Español

Dominar la manipulación del DOM en JavaScript ​

La manipulación del DOM (Document Object Model) en JavaScript es una habilidad fundamental para los desarrolladores web. Nos permite cambiar dinámicamente el contenido y la estructura de una página web. En esta guía completa, exploraremos diversas técnicas y métodos para manipular el DOM utilizando JavaScript. Ya seas un principiante o un desarrollador experimentado, esta guía te proporcionará información valiosa y ejemplos para mejorar tus habilidades.

Cambiar el contenido y los atributos de los elementos ​

Manipular el contenido y los atributos de los elementos del DOM es un aspecto crucial del desarrollo web dinámico. Al cambiar el contenido, podemos actualizar el texto o el HTML dentro de un elemento. Al modificar los atributos, podemos cambiar propiedades como class, id o src. JavaScript proporciona métodos potentes para realizar estas tareas, lo que nos permite crear aplicaciones web responsivas e interactivas. Exploremos cómo utilizar innerHTML, textContent, setAttribute y getAttribute de manera efectiva.

Cambiar el contenido de los elementos ​

Podemos cambiar el contenido de un elemento utilizando las propiedades innerHTML o textContent.

innerHTML vs textContent ​

innerHTML nos permite establecer u obtener el contenido HTML de un elemento, incluidas las etiquetas HTML.

html
<!DOCTYPE html>
<html>
<head>
    <title>innerHTML vs textContent</title>
    <style>
        .content-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .html-content {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content-container">
        <p id="content">Original paragraph content.</p>
        <button id="change-innerHTML">Change using innerHTML</button>
        <button id="change-textContent">Change using textContent</button>
    </div>

    <script>
        const content = document.getElementById('content');
        const innerHTMLButton = document.getElementById('change-innerHTML');
        const textContentButton = document.getElementById('change-textContent');

        innerHTMLButton.addEventListener('click', () => {
            content.innerHTML = 'New content with <strong class="html-content">HTML</strong> tags.';
        });

        textContentButton.addEventListener('click', () => {
            content.textContent = 'Updated paragraph content without HTML tags.';
        });
    </script>
</body>
</html>
Try it Yourself »

Explicación:

  • innerHTML nos permite establecer u obtener el contenido HTML de un elemento, incluidas las etiquetas HTML. En el ejemplo, al hacer clic en el botón "Change using innerHTML" se reemplazará el contenido del párrafo con un nuevo contenido que incluye etiquetas HTML, lo que cambia la apariencia del texto.
  • textContent establece u obtiene el contenido de texto de un elemento sin analizar las etiquetas HTML. Al hacer clic en el botón "Change using textContent" se reemplazará el contenido del párrafo con texto plano, ignorando cualquier etiqueta HTML.

INFO

Utiliza textContent al insertar contenido generado por el usuario para evitar riesgos de seguridad como XSS (Cross-Site Scripting).

Cambiar los atributos de los elementos ​

Podemos cambiar los atributos de un elemento utilizando el método setAttribute y recuperarlos usando el método getAttribute. Estos métodos son útiles para modificar elementos dinámicamente según las interacciones del usuario u otros eventos.

html
<!DOCTYPE html>
<html>
<head>
    <title>setAttribute and getAttribute</title>
</head>
<body>
    <div id="container" class="initial-class">Container content</div>
    <button id="change-attribute">Change Attribute</button>
    <button id="get-attribute">Get Attribute</button>

    <script>
        const container = document.getElementById('container');
        const changeAttributeButton = document.getElementById('change-attribute');
        const getAttributeButton = document.getElementById('get-attribute');

        changeAttributeButton.addEventListener('click', () => {
            container.setAttribute('class', 'new-class');
            alert('Class attribute changed to "new-class"');
        });

        getAttributeButton.addEventListener('click', () => {
            const className = container.getAttribute('class');
            alert(`Current class attribute: ${className}`);
        });
    </script>
</body>
</html>
Try it Yourself »

Explicación:

  • setAttribute('attributeName', 'value'): Este método nos permite establecer un nuevo valor para un atributo especificado de un elemento. En el ejemplo, al hacer clic en el botón "Change Attribute" se cambia el atributo class del <div> de "initial-class" a "new-class".
  • getAttribute('attributeName'): Este método recupera el valor actual del atributo especificado. Al hacer clic en el botón "Get Attribute" se muestra una alerta con el valor actual del atributo class del <div>.

INFO

Utiliza siempre setAttribute y getAttribute para atributos personalizados y generados dinámicamente. Para manipular clases, considera usar classList.add(), classList.remove() y classList.toggle() para una sintaxis más limpia y segura.

javascript
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

Agregar y eliminar elementos ​

Podemos agregar nuevos elementos al DOM o eliminar elementos existentes.

Agregar elementos ​

Para agregar nuevos elementos al DOM, primero los creamos utilizando el método createElement, luego los adjuntamos a un elemento existente usando appendChild o los insertamos en una posición específica usando insertBefore.

createElement(), appendChild(), insertBefore() ​

html
<!DOCTYPE html>
<html>
<head>
    <title>Adding Elements</title>
</head>
<body>
    <div id="task-list">
        <h2>Task List</h2>
        <ul id="tasks">
            <li>Initial task</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
        <button id="insert-before">Insert Before First Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');
        const insertBeforeButton = document.getElementById('insert-before');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        insertBeforeButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                const firstTask = taskList.firstElementChild;
                taskList.insertBefore(newTask, firstTask);
            }
        });
    </script>
</body>
</html>
Try it Yourself »

Explicación:

  • createElement('tagName'): Este método crea un nuevo elemento especificado por tagName. Por ejemplo, document.createElement('li') crea un nuevo elemento <li>.
  • appendChild(newElement): Este método adjunta un nuevo elemento hijo a un elemento padre especificado. En el ejemplo, al hacer clic en el botón "Add Task" se crea un nuevo elemento de lista (<li>) y se adjunta a la lista de tareas (<ul>).
  • insertBefore(newElement, referenceElement): Este método inserta un nuevo elemento antes de un elemento de referencia especificado dentro del mismo padre. Al hacer clic en el botón "Insert Before First Task" se crea un nuevo elemento de lista (<li>) y se inserta antes de la primera tarea en la lista.

note

Para insertar cadenas HTML directamente, considera insertAdjacentHTML(). Para reemplazar un elemento existente, element.replaceWith(newElement) es una alternativa moderna a combinar remove() y appendChild().

Eliminar elementos ​

Para eliminar un elemento, podemos usar el método moderno element.remove().

html
<!DOCTYPE html>
<html>
<head>
    <title>Removing Elements</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph.</p>
        <button id="remove-paragraph">Remove Paragraph</button>
    </div>

    <script>
        const container = document.getElementById('container');
        const paragraph = document.getElementById('paragraph');
        const removeParagraphButton = document.getElementById('remove-paragraph');

        removeParagraphButton.addEventListener('click', () => {
            paragraph.remove();
        });
    </script>
</body>
</html>
Try it Yourself »

Explicación:

  • element.remove(): Este método moderno elimina un elemento especificado del DOM directamente. En el ejemplo, al hacer clic en el botón "Remove Paragraph" se elimina el elemento <p> de la página.

INFO

El uso de element.remove() es el enfoque recomendado para cambios dinámicos de contenido, como eliminar elementos de un carrito de compras, ya que proporciona una sintaxis más limpia que el método heredado removeChild.

Ejemplo: Lista de tareas dinámica ​

Creemos una aplicación simple de lista de tareas para demostrar los conceptos anteriores.

html
<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <div id="todo-list">
        <h2>My To-Do List</h2>
        <ul id="tasks">
            <li>Learn JavaScript</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        taskList.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                event.target.remove();
            }
        });
    </script>
</body>
</html>
Try it Yourself »

Explicación:

  • createElement crea un nuevo elemento de elemento de lista para la tarea.
  • appendChild agrega la nueva tarea a la lista de tareas.
  • element.remove() elimina una tarea de la lista de tareas al hacer clic en ella.

note

(Nota: La lógica de adición de tareas sigue el mismo patrón demostrado en la sección Agregar elementos.)

INFO

Al trabajar con grandes conjuntos de datos, considera usar bibliotecas de DOM virtual como React para optimizar el rendimiento y gestionar las actualizaciones de manera más eficiente.

Conclusión ​

Dominar la manipulación del DOM es esencial para crear aplicaciones web dinámicas e interactivas. Al comprender y utilizar métodos para cambiar contenido y atributos, y agregar o eliminar elementos, podemos construir interfaces de usuario responsivas que mejoren la experiencia del usuario. Refinar continuamente estas técnicas garantizará un desarrollo web de alta calidad y alto rendimiento.

Práctica ​

¿Cuál de los siguientes métodos se puede usar para cambiar el contenido de un elemento DOM?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.