javascript - style - ¿Qué devuelven los métodos querySelectorAll, getElementsByClassName y otros getElementsBy*?

htmlcollection

Question

¿ getElementsByClassName (y funciones similares como getElementsByTagName y querySelectorAll ) funcionan igual que getElementById o devuelven una matriz de elementos?

La razón por la que pregunto es porque estoy tratando de cambiar el estilo de todos los elementos usando getElementsByClassName . Vea abajo.

//doesn''t work
document.getElementsByClassName(''myElement'').style.size = ''100px'';

//works
document.getElementById(''myIdElement'').style.size = ''100px'';

Answer 1

Con ES5 + (cualquier navegador hoy en día - 2017), deberías poder hacer

[].forEach.call(document.getElementsByClassName(''answer''), function(el) {
    el.style.color= ''red'';
});

Answer 2

Devuelve una lista tipo Array.

Lo haces una matriz como ejemplo

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  

Answer 3

Está utilizando una matriz como objeto, la diferencia entre getElementbyId y getElementsByClassName es la siguiente:

• getElementbyId te devolverá un objeto.
• getElementsByClassName te devolverá una matriz.

getElementsByClassName

El método getElementsByClassName(classNames) toma una cadena que contiene un conjunto desordenado de tokens únicos separados por espacios que representan clases. Cuando se NodeList , el método debe devolver un objeto vivo NodeList que contenga todos los elementos en el documento que tengan todas las clases especificadas en ese argumento, habiendo obtenido las clases dividiendo una cadena en espacios. Si no hay tokens especificados en el argumento, entonces el método debe devolver un NodeList vacío.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

El método getElementById () accede al primer elemento con el ID especificado.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

en tu código las líneas:

1- document.getElementsByClassName (''myElement''). Style.size = ''100px'';

NO funcionará como se esperaba, dado que getElementByClassName devolverá una matriz, y la matriz NO tendrá la propiedad de style , podrá acceder a cada element al iterarlos.

Es por eso que la función getElementById funcionaba para usted, esta función le devolverá el objeto directo, por lo que podrá acceder a la propiedad de style .

Answer 4

La siguiente descripción se toma de esta página :

El método getElementsByClassName () devuelve una colección de todos los elementos en el documento con el nombre de clase especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Consejo: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con un nombre de clase específico, luego puede recorrer todos los elementos y extraer la información que desee.

Entonces, como un parámetro getElementsByClassName aceptaría un nombre de clase.

Si este es tu cuerpo HTML:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

entonces var menuItems = document.getElementsByClassName(''menuItem'') devolvería una colección (no una matriz) de las 3 <div> superiores, ya que coinciden con el nombre de la clase dada.

A continuación, puede iterar sobre esta colección de nodos ( <div> s en este caso) con:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Consulte esta publicación para obtener más información sobre las diferencias entre elementos y nodos.

Answer 5

Puedes obtener un solo elemento ejecutando

document.querySelector(''.myElement'').style.size = ''100px'';

pero va a funcionar para el primer elemento con la clase .myElement.

Si desea aplicar esto para todos los elementos con la clase, le sugiero que use

document.querySelectorAll(''.myElement'').forEach(function(element) {
    element.style.size = ''100px'';
});

Answer 6

Su código getElementById() funciona ya que los ID deben ser únicos y, por lo tanto, la función siempre devuelve exactamente un elemento (o null si no se encontró ninguno).

Sin embargo, getElementsByClassName() , querySelectorAll() y otros métodos getElementsBy* devuelven una colección de elementos similar a una matriz. Iteramos sobre él como lo haríamos con una matriz real:

var elems = document.getElementsByClassName(''myElement'');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = ''100px'';
}

Si prefieres algo más corto, considera usar jQuery :

$(''.myElement'').css(''size'', ''100px'');

Answer 7

ES6 proporciona el método Array.from() , que crea una nueva instancia de Array a partir de un objeto similar a una matriz o iterable.

let boxes = document.getElementsByClassName(''box'');

Array.from(boxes).forEach(v => v.style.background = ''green'');
console.log(Array.from(boxes));

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<div class=''box''></div>
<div class=''box''></div>
<div class=''box''></div>
<div class=''box''></div>

Como puede ver dentro del fragmento de código, después de usar la función Array.from() puede manipular sobre cada elemento.

La misma solución usando jQuery .

$(''.box'').css({''background'':''green''});

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=''box''></div>
<div class=''box''></div>
<div class=''box''></div>
<div class=''box''></div>

Answer 8

En otras palabras

• document.querySelector() selecciona solo el primer elemento del selector especificado. Por lo tanto, no escupe una matriz, es un valor único. Similar a document.getElementById() que solo busca elementos de ID, ya que los ID deben ser únicos.

• document.querySelectorAll() selecciona todos los elementos con el selector especificado y los devuelve en una matriz. Similar a document.getElementsByClassName() para las clases y las etiquetas document.getElementsByTagName() .

¿Por qué usar querySelector?

Se usa simplemente con el único propósito de facilidad y brevedad.

¿Por qué usar getElement / sBy? *

Un rendimiento más rápido.

¿Por qué esta diferencia de rendimiento?

Ambas formas de selección tienen el propósito de crear una NodeList para su uso posterior. querySelectors genera una NodeList estática con los selectores, por lo que primero debe crearse desde cero.
getElement / sBy * adapta inmediatamente el NodeList activo existente del DOM actual.

Entonces, cuándo usar qué método depende de usted / su proyecto / su dispositivo.

Infos

Demo de todos los métodos
Documentación de NodeList
Prueba de rendimiento