Que renvoient les méthodes querySelectorAll et getElementsBy* ?

Question

Haga getElementsByClassName (et des fonctions similaires comme getElementsByTagName y querySelectorAll ) fonctionnent de la même manière que getElementById ou renvoient-ils un tableau d'éléments ?

La raison de ma question est que j'essaie de modifier le style de tous les éléments à l'aide de la fonction getElementsByClassName . Voir ci-dessous.

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

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

Answer 1

Une solution très vieille école :

        [].forEach.call(document.getElementsByClassName('myClass'), function (el) {
            el.style.size = '100px';
        });

Answer 2

Une réponse pour le cas spécifique de Drenzii ...

Vous pourriez faire une fonction qui fonctionnera pour tous les word éléments et entrez le numéro de celui que vous voulez transformer, par exemple :

// 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>