Diferencia entre querySelector y getElementById

Los métodos querySelector y getElementById de Javascript permiten recuperar un elemento del modelo de objetos de documento (DOM) de JavaScript. Sin embargo, cada método tiene sus propios casos de uso.

En esta guía, veremos el caso de uso más común de querySelector y getElementById. También haremos una comparación de estos dos métodos y le mostramos un ejemplo básico de cómo funciona cada uno de ellos.

¿Qué es querySelector?

El método querySelector () de JavaScript le permite recuperar un elemento del DOM, o la página web, usando un selector de CSS. Este método viene con una función hermana llamada querySelectorAll () que selecciona todos los elementos que coinciden con un selector particular del DOM.

Estos dos métodos son increíblemente versátiles. Esto se debe a que la sintaxis del selector de CSS le permite seleccionar cualquier elemento de una página web.

Al usar querySelector, no tiene que preocuparse por verse limitado por solo poder seleccionar elementos por clase o ID, como lo haría si usara getElementById o getElementsByClassName.

Estos métodos son particularmente útiles si los elementos que está seleccionando son similares a los que selecciona en su hoja de estilo CSS.

Echemos un vistazo al método querySelector. Comenzaremos escribiendo un elemento HTML que luego podremos seleccionar en JavaScript:

<p class = "accessibility"> Saltar al contenido principal </p>

Hemos definido un párrafo de texto con el nombre de clase "accesibilidad". A continuación, seleccionemos este párrafo usando el método querySelector ().

const accessibility_elements = document.querySelector (". accesibilidad");

Este código nos permite seleccionar el primer elemento cuya clase es igual a "accesibilidad". Los "." denota que queremos seleccionar una clase. Si tuviéramos dos elementos con la clase "accesibilidad", podríamos usar el método querySelectorAll () para recuperar ambos.

¿Qué es getElementById?

The getElementById() method retrieves an element based on its ID attribute, hence the name.

This method is more restrictive than querySelector because you can only retrieve elements based on their particular ID.

You would use this method if you only want to retrieve one element from the web page. This is because HTML IDs must be unique to a particular element. You cannot use an ID to refer to two elements on the web page.

Let’s retrieve an element using the getElementById selector. First, let’s write the HTML code from which we are going to select an element:

<section id="comments">
	<h2>Comments</h2>
</section>

Next, let’s write the JavaScript code to select an element from the DOM:

const comments_section = document.getElementById("comments");

We use the JavaScript statement to retrieve the element whose ID is equal to “comments”. This is the <section> element where we display comments on our web page.

querySelector vs. getElementById

La similitud obvia entre estos dos métodos es que ambos seleccionan elementos de una página web. Lo hacen de diferentes formas.

Con una instrucción querySelector, puede seleccionar un elemento basado en un selector de CSS. Esto significa que puede seleccionar elementos por ID, clase o cualquier otro tipo de selector. Con el método getElementById, solo puede seleccionar un elemento por su ID.

Por lo general, debe optar por el selector que haga el trabajo con mayor claridad.

Si solo necesita seleccionar un elemento por ID o clase, puede usar getElementById o getElementsByClassName, respectivamente. Si necesita utilizar una regla más elaborada para seleccionar elementos, el método querySelector es su mejor opción.