Maison > interface Web > tutoriel HTML > le corps du texte

Comprendre l'utilisation de NodeList, HTMLCollection et NamedNodeMap (code)

云罗郡主
Libérer: 2018-10-17 14:53:48
avant
2044 Les gens l'ont consulté

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.

  1. HTMLCollection ne contient que des nœuds d'éléments, tandis que NodeList contient n'importe quel type de nœud.

  2. 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().

  3. 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.

  4. 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(&#39;a1&#39;))
	console.log(res.namedItem(&#39;a2&#39;))
	// 结果如下图所示:
</script>
Copier après la connexion

Comprendre 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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal