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

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

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

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

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

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

Answer 2

Il renvoie une liste de type tableau.

Vous en faites un tableau comme exemple

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

Answer 3

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

Answer 4

Avec n'importe quel navigateur supportant ES5+ (tout navigateur fondamentalement supérieur à IE8), vous pouvez utiliser la balise Array.prototype.forEach méthode.

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

source de caniuse

Answer 5

On m'a donc dit qu'il s'agissait d'un doublon de ma question et que je devais supprimer la mienne, ce que je vais faire pour que le forum reste propre et que je conserve le droit de poser des questions.

Comme je pense que la mienne et cette question sont vraiment différentes, je vais indiquer la réponse à la mienne, ainsi je compléterai les connaissances de cette page et l'information ne sera pas perdue.

Pregunta

1. J'ai un code dans le snippet qui a un document.getElementsByClassName("close")[0] ce que le [0] fait ?

2. Je n'ai jamais vu l'utilisation de crochets en getElementsByClassName dans quel but est-il utilisé ?

3. Aussi, comment puis-je le convertir en jQuery ?

Réponse :

1. Le code dans le snippet a un [0] il est en fait utilisé comme un tableau et comme il s'agit d'un 0, il se réfère à la première fois que la classe nommée est utilisée.

2. Même chose que ci-dessus.

3. Je ne pouvais pas vraiment le faire et personne n'a répondu. Dans la partie du code qui se réfère à event. target Je ne peux pas utiliser $("#myModal") au lieu de document.getElementById("myModal") Je pense qu'ils devraient être équivalents, mais dans ce cas, le formulaire jQuery remplaçant le formulaire standard ne produira pas l'effet désiré.

   window.onclick = function(event) {
     if (event.target == modal) {
       modal.style.display = "none";
     }
   }

   var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0];

   btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

   body {font-family: Arial, Helvetica, sans-serif;}

   .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }

   .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }

   .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }

   .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

   <h2>Modal </h2>

   <button id="myBtn">Open Modal</button>

   <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div>

mise à jour

Il semble que je ne puisse pas vraiment supprimer ma question et que les gens n'en soient pas satisfaits, je ne sais vraiment pas ce que je dois faire.