Obtener elemento por tipo en JavaScript

JavaScript proporciona varias formas de obtener un elemento como getElementById() y getElementByClass(). Pero, ¿qué pasa si desea seleccionar / procesar todos los elementos de un tipo específico? JavaScript proporciona el método querySelectorAll() o el método getElementsByTagName() para realizar dicha tarea.

En este artículo, aprenderemos cómo obtener elementos por su tipo en JavaScript.

Obtener elemento por querySelectorAll() en JavaScript

Este es un método de document incorporado que es proporcionado por JavaScript y devuelve los objetos de elemento / NodeList cuyos selectores coinciden con los selectores especificados. También se pueden pasar varios selectores. Hay una diferencia entre querySelectorAll() y querySelector(). Con el primero, se devuelven todos los objetos del elemento coincidente y, luego, con el segundo, es un único objeto de elemento coincidente. Si se pasa un selector no válido, se emite un SyntaxError.

Sintaxis

document.querySelectorAll($selectors);

Parámetro

• $selectors: Es un parámetro obligatorio que especifica el selector de un atributo HTML que debe coincidir. Se pueden pasar varios selectores mediante la separación por comas. Por ejemplo, document.querySelectorAll("p") encuentra todos los elementos de etiqueta p.

Valor devuelto

Devuelve los objetos de elemento DOM correspondientes si se encuentran los elementos correspondientes; de lo contrario, devuelve NodeList vacío.

Código de ejemplo:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

Producción :

2
John
Doe

Obtener elemento por getElementsByTagName() en JavaScript

Este es un método de document integrado proporcionado por JavaScript y devuelve los objetos de elemento / NodeList cuya etiqueta coincide con el nombre de etiqueta especificado. El nodo raíz también se incluye en la búsqueda y se devuelven colecciones HTML en vivo.

Sintaxis

document.getElementsByTagName($name);

Parámetro

• $name: Es un parámetro obligatorio que especifica el tagName de un atributo HTML que debe coincidir.

Valor devuelto

Devuelve el objeto de elemento DOM correspondiente si se encuentran los elementos correspondientes; de lo contrario, devuelve null.

La única diferencia entre getElementsByTagName y querySelectorAll es que el primero solo selecciona elementos cuyo nombre de etiqueta especificado coincide con el nombre de etiqueta dado. Por el contrario, querySelectorAll puede utilizar cualquier selector, lo que le da mucha más flexibilidad y potencia.

Además, getElementsByTagName devuelve una lista de nodos en vivo mientras que querySelectorAll devuelve una lista de nodos estática. La lista de nodos en vivo ayuda a actualizar el resultado tan pronto como cambia el DOM, y no requiere que inicie la consulta.

Código de ejemplo:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type.toLowerCase() == 'text') {
    console.log(inputs[i].value);
  }
}

Producción :

John
Doe