2
respuestas

Función vs querySelector

Referente al curso JavaScript: Introducción al lenguaje de la web

por Daniel Vargas López
| 29.4k xp | 1 posts

He visto que en el curso se muestra que la asignación de campos de texto a una variable con "document.query selector" mi pregunta es: ¿sería mejor crear la siguiente función? como se muestra en uno de los ejercicios del curso? para buscar el elemento de html?

 function bucarElemento(selector){
        return document.querySelector(selector);
    }

    var ejemplo = buscarElemento('#nombre');

por otra parte en el curso se muestra que se usa siempre document.querySelector directamente en la variable

var ejemplo = document.querySelector('#nombre');

Quedé un poco confudido en esa parte, es decir siempre es bueno ser explícitos en el código ó reducirlo?

2 respuestas
por Jose Gonzalez
| 2141.6k xp | 6724 posts
Instructor

Hola Daniel, como estás?

Es Interesante como creaste esa función, solo para contextualizar un poco básicamente usamos querySelector() para apuntar a los elementos específicados en el html, con la finalidad de poder manipurlalos a través de javascript.

Mientras que una función en javascript es un objeto que se puede manipular y transmitir al igual que cualquier otro objeto. Ciertamente usamos funciones para encapsular bloques de código con la finalidad de hacerlo reutilizable y que nuestro código sea mas limpio.

De ese modo en que estás implementando ese código funciona, solo que tienes que tomar en cuenta el consumo de memoria, que para el contexto del aula no hace mucha diferencia pero en proyectos mayores, lo ideal sería querer manipular el DOM com querySelector().

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Eddy Frankelly Jimenez Santiago
| 84.3k xp | 100 posts

También tienes la opción de agregar el comando de document.querySelector a una constante, y así no tienes que estar escribiendo lo mismo cuando quieras enlazar un elemento de HTML con JavaScript. Ejemplo:

    const SELECT = document.querySelector.bind(document);
    const ALL = document.querySelectorAll.bind(document);

    let botonAdicionar = SELECT("#adicionar-paciente");

En ese ejemplo yo cree dos variables, una para almacenar el querySelector y otra para el querySelectorAll, así cuando quiera utilizar esos metodos, solo tengo que escribir la palabra SELECT() que es equivalente a document.querySelector()