HTMLCollection

Vamos a ver un ejemplo de conversión de una colección de nodos html (HTMLCollection) a un Array. Pero para que no sea tan sencillo, vamos a imaginar el siguiente fragmento html:

<fieldset id="Puesto de trabajo">
  <p>Un párrafo</p>
  <br />
  <p>Un párrafo</p>
  <br />
  <p>Un párrafo</p>
  <br />
  <p>Un párrafo</p>
  <br />
  <p>Un párrafo</p>
  <br />
  <br />
</fieldset>

El objetivo es seleccionar el elemento fieldset y, una vez seleccionado (fíjate que el id contiene espacios), lo que se pretende es ocultar todas las etiquetas <br> que contiene.

const fieldset = document.querySelector('[id="Puesto de trabajo"]');

• Fíjate en cómo se utiliza el selector cuando el id tiene espacios.

Una vez que tenemos una referencia a la etiqueta “padre” se procede a seleccionar todos sus elementos “hijos”.

const hijos = fieldset.children;
// hijos contine un HTMLCollection(11)[p,br,p,br,p,br,p,br,p,br,br]

El objetivo final es ocultar las etiquetas <br>. Para ello vamos a usar el método filter del objeto Array(). Pero antes, hemos de convertir el objeto HTMLCollection en Array, de lo contrario no podemos aplicar este método.

// let array = [].slice.call(HTMLCollection);
let arrayBrs = [].slice.call(hijos);

Una vez que ya tenemos el array con todas las etiquetas, las filtramos y nos quedamos solamente con las que nos interesan:

const brs = arrayBrs.filter((e) => (e.nodeName = "BR"));
// brs contiene las etiquetas <br> contenidas en <fieldset>
// las ocultamos:
brs.forEach((e) => (e.style.display = "none"));

Lo podríamos hacer todo mucho más compacto:

[].slice
  .call(fieldset.children)
  .filter((e) => e.nodeName === "BR")
  .forEach((e) => (e.style.display = "none"));