web-dev-qa-db-fra.com

Que renvoient les méthodes querySelectorAll et getElementsBy *?

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

La raison pour laquelle je pose cette question est parce 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';
javascriptgetelementsbyclassnamedom-traversal
119
dmo

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

Cependant, getElementsByClassName() , querySelectorAll() , et d'autres getElementsBy* Les méthodes retournent une collection d'éléments ressemblant à des tableaux. Itérez 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, utilisez jQuery :

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

Vous utilisez un tableau comme objet, la différence entre getElementbyId et getElementsByClassName est la suivante:

  • getElementbyId vous retournera un objet.
  • getElementsByClassName vous retournera un tableau.

getElementsByClassName

La méthode getElementsByClassName(classNames) prend une chaîne contenant un ensemble non ordonné de jetons uniques séparés par des espaces et représentant des classes. Lorsqu'elle est appelée, la méthode doit renvoyer un objet live NodeList contenant tous les éléments du document contenant toutes les classes spécifiées dans cet argument, après avoir obtenu les classes en scindant une chaîne sur des espaces. Si aucun argument n'est spécifié dans l'argument, la méthode doit alors renvoyer une liste de noeuds 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é.

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

dans votre code les lignes:

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

fonctionnera comme prévu [~ # ~] et non [~ # ~] , car getElementByClassName renverra un tableau, et le tableau [~ # ~] pas [~ # ~] aura la propriété style, vous pouvez accéder à chaque element en itérant à travers eux.

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

15
Alvaro Joao

La description suivante est tirée de cette page :

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

L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des 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 portant un nom de classe spécifié. Vous pouvez ensuite 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>

alors var menuItems = document.getElementsByClassName('menuItem') renverrait une collection (et non un tableau) des 3 <div> supérieurs, car ils correspondent au nom de classe donné.

Vous pouvez ensuite parcourir la collection de noeuds (<div> S dans ce cas) avec:

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

Veuillez vous référer à this post pour plus d'informations sur les différences entre les éléments et les nœuds.

11
remdevtec

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

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 à l'intérieur de l'extrait de code, après avoir utilisé Array.from() , vous pouvez ensuite manipuler chaque élément.


La même solution 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>
8
kind user

En d'autres termes

  • document.querySelector() ne sélectionne que le premier élément un du sélecteur spécifié. Donc, il ne crache pas un tableau, c'est une valeur unique. Similaire à document.getElementById() qui récupère uniquement les éléments ID, car les ID doivent être uniques.

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


Pourquoi utiliser querySelector?

Il est utilisé uniquement à des fins de facilité et de brièveté.


Pourquoi utiliser getElement/sBy? *

Performance plus rapide.


Pourquoi cette différence de performance?

Les deux méthodes de sélection ont pour but de créer un NodeList pour une utilisation ultérieure. querySelectors génère une liste de noeuds 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émonstration de toutes les méthodes
Documentation de NodeList
Test de performance

6
Thielicious

Il retourne une liste semblable à un tableau.

Vous en faites un tableau à titre d'exemple

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

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 cela à tous les éléments de la classe, je vous suggère d'utiliser

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
4
Sergey 
/*
 * 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
4
Irina Mityugova

Avec ES5 + (tous les navigateurs actuels - 2017), vous devriez pouvoir faire

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