Maison > Article > interface Web > Comprendre l'utilisation de NodeList, HTMLCollection et NamedNodeMap (code)
Comprendre l'utilisation de NodeList, HTMLCollection et NamedNodeMap (code)
- 云罗郡主avant
- 2018-10-17 14:53:042049parcourir
Le contenu de cet article concerne la compréhension de l'utilisation (code) de NodeList, HTMLCollection et NamedNodeMap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Ces trois sont des objets ressemblant à des tableaux.
HTMLCollection ne contient que des nœuds d'éléments, tandis que NodeList contient n'importe quel type de nœud.
L'objet HTMLCollection peut appeler les méthodes item() et approvedItem(), et l'objet NodeList ne peut appeler que la méthode item(). Lors de l'obtention d'éléments, les deux peuvent être effectués via la syntaxe entre crochets ou la méthode item(). L'objet HTMLCollection vous permet d'obtenir des éléments en passant un nom ou un identifiant via la méthode nomméeItem().
Certaines méthodes dans les navigateurs plus anciens (tels que getElementsByClassName()) renvoient des objets NodeList au lieu d'objets HTMLCollection. La propriété childNodes de tous les navigateurs renvoie un objet NodeList. querySelectorAll() de la plupart des navigateurs renvoie un objet NodeList. getElementsByTagName() renvoie un objet HTMLCollection.
L'objet NamedNodeMap est obtenu via l'attribut node.attributes, et un objet pseudo-tableau composé de tous les attributs de l'élément est obtenu.
Exemple :
<body>
<p>
<a href="#" id="a1">1</a>
<a href="a.html" name="a2">2</a>
</p>
</body>
<script>
// 获取一个HTMLCollection对象
var res = document.getElementsByTagName("a");
console.log(res);
console.log(res.item(0))
console.log(res[0])
console.log(res.namedItem('a1'))
console.log(res.namedItem('a2'))
// 结果如下图所示：
</script> "153975910994667Comprendre lutilisation de NodeList, HTMLCollection et NamedNodeMap (code)")
Ce qui précède est une introduction complète à l'utilisation (code) de NodeList, HTMLCollection et NamedNodeMap , Si vous souhaitez en savoir plus sur le Tutoriel vidéo HTML, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!