Que renvoient les méthodes querySelectorAll et getElementsBy *?

Faire getElementsByClassName (et des fonctions similaires comme getElementsByTagNameet querySelectorAll) fonctionnent de la même manière getElementByIdou renvoient-elles un tableau d'éléments?

La raison pour laquelle je demande est que j'essaie de changer le style de tous les éléments en utilisant getElementsByClassName. Voir ci-dessous.

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

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

Votre getElementById()code fonctionne car les identifiants doivent être uniques et donc la fonction renvoie toujours exactement un élément (ounull si aucun n'a été trouvé).

Cependant, getElementsByClassName(), querySelectorAll()et d' autres getElementsBy*méthodes renvoient une collection semblable à un tableau d'éléments. Répétez dessus comme vous le feriez avec un vrai tableau:

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

Si vous préférez quelque chose de plus court, envisagez d'utiliser jQuery :

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

Vous utilisez un tableau comme objet, la différence entre getElementbyIdet getElementsByClassNameest la suivante:

• getElementbyIdretournera un objet Element ou nul si aucun élément avec l'ID n'est trouvé
• getElementsByClassNameretournera une HTMLCollection en direct , éventuellement de longueur 0 si aucun élément correspondant n'est trouvé

getElementsByClassName

La getElementsByClassName(classNames)méthode prend une chaîne qui contient un ensemble non ordonné de jetons uniques séparés par des espaces représentant des classes. Lorsqu'elle est appelée, la méthode doit retourner un NodeListobjet vivant contenant tous les éléments du document qui ont toutes les classes spécifiées dans cet argument, après avoir obtenu les classes en divisant une chaîne sur les espaces. Si aucun jeton n'est spécifié dans l'argument, la méthode doit renvoyer une NodeList vide.

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

getElementById

La méthode getElementById () accède au premier élément avec l'ID spécifié.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

dans votre code les lignes:

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

ne pas fonctionner comme prévu, parce que la getElementByClassNameretourne un tableau, et le tableau sera pas avoir la stylepropriété, vous pouvez accéder à chaqueelement par itérer à travers eux.

C'est pourquoi la fonction getElementByIda fonctionné pour vous, cette fonction retournera l'objet direct. Par conséquent, vous pourrez accéder à la stylepropriété.

La description suivante est tirée de cette page :

La méthode getElementsByClassName () renvoie une collection de tous les éléments du document avec le nom de classe spécifié, sous la forme d'un objet NodeList.

L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par numéros d'index. L'index commence à 0.

Conseil: vous pouvez utiliser la propriété length de l'objet NodeList pour déterminer le nombre d'éléments avec un nom de classe spécifié, puis vous pouvez parcourir tous les éléments et extraire les informations souhaitées.

Donc, en tant que paramètre getElementsByClassName accepterait un nom de classe.

S'il s'agit de votre corps HTML:

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

puis var menuItems = document.getElementsByClassName('menuItem')retournerait une collection (pas un tableau) des 3 supérieurs<div> s , car ils correspondent au nom de classe donné.

Vous pouvez ensuite parcourir cette collection de nœuds ( <div>dans ce cas) avec:

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

Veuillez consulter cet article pour en savoir plus sur les différences entre les éléments et les nœuds.

ES6 fournit une Array.from()méthode qui crée une nouvelle instance Array à partir d'un objet de type tableau ou itérable.

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>

Comme vous pouvez le voir dans l'extrait de code, après avoir utilisé la Array.from()fonction, vous pouvez alors manipuler chaque élément.

La même solution en utilisant 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>

En d'autres termes

• document.querySelector()sélectionne uniquement la première un élément du sélecteur spécifié. Donc, il ne crache pas un tableau, c'est une valeur unique. Semblable à ce document.getElementById()qui va chercher ID-éléments seulement, étant donné que les ID doivent être uniques.

• document.querySelectorAll()sélectionne tous les éléments avec le sélecteur spécifié et les renvoie dans un tableau. Similaire à document.getElementsByClassName()pour les classes et les document.getElementsByTagName()balises uniquement.

Pourquoi utiliser querySelector?

Il est utilisé uniquement dans le seul but de facilité et de brièveté.

Pourquoi utiliser getElement / sBy? *

Des performances plus rapides.

Pourquoi cette différence de performance?

Les deux méthodes de sélection ont pour but de créer une liste de nœuds pour une utilisation ultérieure. querySelectors génère une liste de nœuds statique avec les sélecteurs, elle doit donc d'abord être créée à partir de zéro.
getElement / sBy * adapte immédiatement la liste de nœuds en direct existante du DOM actuel.

Alors, quand utiliser quelle méthode c'est à vous / votre projet / votre appareil.

Infos

Démo de toutes les méthodes Test de performance de la
documentation NodeList

Il renvoie une liste de type Array.

Vous en faites un tableau comme exemple

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

Vous pouvez obtenir un seul élément en exécutant

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

mais cela fonctionnera pour le premier élément avec la classe .myElement.

Si vous souhaitez appliquer ceci pour tous les éléments avec la classe, je vous suggère d'utiliser

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

/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name

Avec ES5 + (tout parcouru de nos jours - 2017), vous devriez pouvoir faire

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

Une réponse au cas spécifique de Drenzii ...

Vous pouvez créer une fonction qui fonctionnera pour n'importe lequel des wordéléments et passer le numéro de celui que vous souhaitez transformer, comme:

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>