Que renvoient les méthodes querySelectorAll et getElementsBy* ?

Question

getElementsByClassName (et des fonctions similaires telles que getElementsByTagName et querySelectorAll) fonctionne avec getElementById c'est pareil ? Renvoyer un tableau d'éléments ?

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

//ne fonctionne pas
document.getElementsByClassName('myElement').style.size = '100px';

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

Answer 1

Vous utilisez des tableaux comme objets, getElementbyId et getElementsByClassName est :

• getElementbyId renverra un objet Element< /a> ou null si aucun élément avec cet ID n'est trouvé
• getElementsByClassName renverra une live HTMLCollection< /a>, qui peut être de longueur 0
si aucun élément correspondant n'est trouvé

getElementsByClassName

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

Obtenir ElementById

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

Incluez les lignes suivantes dans votre code :

ne fonctionnera pas comme prévu car getElementByClassName renverra un tableau, et ce tableau n'a pas getElementByClassName将返回一个数组，并且该数组不具有样式< /code> 属性，您可以通过迭代来访问每个元素 d'attribut style auquel vous pouvez accéder en itérant dans chaque < code >Élément.

C'est l'attribut de la fonction getElementById 为您工作的原因，该函数将返回直接对象。因此，您将能够访问 style.

Answer 2

VotregetElementById 代码之所以有效，是因为 ID 必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回 null).

Cependant, ces méthodes getElementsByClassName, getElementsByName, getItemByTagName, et getElementsByTagNameNS Renvoie une collection itérable d’éléments.

Les noms de méthodes fournissent des indices : getElement 暗示单数，而getElements implique pluriel .

Methods querySelector renvoient également un seul élément et querySelectorAll renvoie une collection itérable.

La collection itérable peut être NodeList 或 HTMLCollectionNodeList ou

HTMLCollection < /code>

un>. getElementsByName和 querySelectorAll 均指定返回 节点列表;其他 getElementsBy* 方法 指定返回 < code>HTMLCollection

document.getElements…(…) 读取 style et NodeList 或 HTMLCollection 没有 style；只有 Element 具有 stylequerySelectorAll

spécifient tous deux de renvoyer la 🎜liste de nœuds ;Autre 🎜getElementsBy* méthode🎜 spécifie de renvoyer < code>HTMLCollection, veuillez toutefois noter que certaines versions de navigateur implémentent cela différemment. 🎜 🎜Ces deux types de collections ne fournissent pas les mêmes propriétés que les éléments, nœuds ou types similaires ; c'est pourquoi lire 🎜style< depuis 🎜document.getElements…🎜(…🎜) / code> Raison de l’échec. En d'autres termes : 🎜NodeList ou 🎜HTMLCollection n'a pas de 🎜style ; seul 🎜Element a 🎜style ; 🎜

---

Ces collections « de type tableau » sont des listes de zéro ou plusieurs éléments sur lesquels vous devez parcourir pour y accéder. Bien que vous puissiez les parcourir comme des tableaux, veuillez noter qu'ils ne sont pas les mêmes que noreferrer">s. 数组 Dans les navigateurs modernes, vous pouvez utiliser

Array.from

 ; vous pouvez ensuite utiliser forEach et d'autres méthodes array comme les méthodes d'itération Array.from;那么您可以使用 forEach :

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

Dans les anciens navigateurs qui ne prennent pas en charge Array.from ou les méthodes d'itération, vous pouvez toujours utiliser

. Ensuite, vous pouvez le parcourir comme un vrai tableau : Array.prototype.slice.call

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

Vous pouvez également itérer

lui-même, mais notez que dans la plupart des cas, ces collections sont

liveNodeList 或 HTMLCollection (documentation MDN, spécification DOM), c'est-à-dire qu'elles se mettent à jour à mesure que le DOM change. Donc, si vous insérez ou supprimez des éléments pendant une boucle, assurez-vous de ne pas accidentellement sauter certains éléments ou créer une boucle infinie. La documentation MDN doit toujours indiquer si une méthode renvoie une collection live ou une collection statique. Par exemple,

 :

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

NodeList 提供了一些迭代方法，例如现代浏览器中的 forEachVous pouvez également utiliser une simple

boucle :

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

forNarration :

.childNodes< /a> génère une

live NodeList et .children.childNodes< /a> 产生一个 live NodeList 和 .children 生成一个 live HTMLCollection génère un

live

---

HTMLCollection, donc ces deux getters doivent également être gérés avec se soucier.

Il existe des bibliothèques comme

jQuery🎜 qui raccourcissent les requêtes DOM et créent une couche d'abstraction sur "un élément" et une "collection d'éléments": 🎜

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