Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Duda] HTML o JS?

¿Cuál es la diferencia entre escribir el título o el párrafo dentro del mismo HTMl y hacerlo con el "document.querySelector" de JavaScript?

Gracias

3 respuestas

Hola maria, para que lo entiendas y no te confundas te voy a explicar con dos ejemplos:

Ejemplo 1:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Título</title>
</head>
<body>
    <h1>Mi Título</h1>
    <p>Mi párrafo de ejemplo.</p>
</body>
</html>

En este caso, el título y el párrafo se establecen directamente en el HTML. Esto es estático y no cambia a menos que edites el propio HTML.

Ejemplo 2:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Manipulación</title>
</head>
<body>
    <h1 id="miTitulo">Mi Título</h1>
    <p id="miParrafo">Mi párrafo de ejemplo.</p>

    <script>
        // modificamos el contenido mediante JavaScript
        document.querySelector('#miTitulo').innerText = 'Nuevo Título';
        document.querySelector('#miParrafo').innerText = 'Nuevo párrafo de ejemplo.';
    </script>
</body>
</html>

En este ejemplo, se utiliza JavaScript para seleccionar el título y el párrafo mediante sus identificadores (id) y modificar su contenido dinámicamente.

Cabe recalcar que la manipulación dinámica a través de JavaScript es útil cuando necesitas cambiar el contenido de la página en respuesta a eventos, interacciones del usuario, o datos dinámicos.

El uso del document query selector te permite cambiar dinámicamente el título después de que la página se ha cargado.

Una de las razones puede ser que si tu proyecto es muy grande puede ser difícil hacer cambios al buscar el título o el párrafo por tu cuenta, en cambio con javascript buscas con querySelector lo que quieres cambiar, además de poderlo hacer dentro del mismo juego sin volver a cargar la página cuando deseas realizar algún cambio en ese momento.