P粉5205457532023-08-25 16:48:41
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");
répondre
0