明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

知道NodeList、HTMLCollection以及NamedNodeMap的使用(代碼)

發(fā)表時間：2023-08-30 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于了解NodeList、HTMLCollection以及NamedNodeMap的使用(代碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。這三個都是類數(shù)組對象。HTMLCollection只包含元素節(jié)點，而NodeList包含任何節(jié)點類型。HTMLC...

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于了解NodeList、HTMLCollection以及NamedNodeMap的使用(代碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

這三個都是類數(shù)組對象。

  1. HTMLCollection只包含元素節(jié)點，而NodeList包含任何節(jié)點類型。

  2. HTMLCollection對象可以調(diào)用item()和namedItem()方法，NodeList對象只能調(diào)用item()方法。在獲取元素時，兩者都可以通過方括號的語法或item()方法。HTMLCollection對象允許通過namedItem()方法，傳入一個name或id獲取元素。

  3. 一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對象，而不是 HTMLCollection 對象。所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。getElementsByTagName()返回HTMLCollection對象。

  4. NamedNodeMap對象是通過node.attributes屬性獲取，獲取到由該元素的所有屬性構(gòu)成的偽數(shù)組對象。

例：

<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'))
	// 結(jié)果如下圖所示：
</script>

1.png

以上就是對了解NodeList、HTMLCollection以及NamedNodeMap的使用(代碼)的全部介紹，如果您想了解更多有關(guān)HTML視頻教程，請關(guān)注PHP中文網(wǎng)。

以上就是了解NodeList、HTMLCollection以及NamedNodeMap的使用(代碼)的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。