標籤：des style http io ar color os sp for
HTML 5 DOM定義了一下集合、列表等複雜的資料類型用於實現便捷的操作。相對於HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、 HTMLFormControlsCollection等。
一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection
三個介面均用於表示一組元素組成的列表。HTMLAllCollection和HTMLFormControlsCollection均繼承自 HTMLCollection介面，對HTMLCollection介面中定義的namedItem()方法進行了重寫。在DOM筆記（一）：HTMLDocument介面， 利用document.forms(/images/embeds等)返回一個HTMLCollection對象，document.all則返回一個 HTMLAllCollection對象，document.forms.elements則返回一個 HTMLFormControlsCollection對象，該對象包含了form中的所有表單元素。
| 屬性或者方法 | 資料類型 | 說明 |
| length | long | 唯讀，返回集合中的元素數量。三個介面均有此屬性 |
| item() | object | 1、根據索引擷取集合中的元素。在HTMLCollection中定義 2、在HTMLCollection中有如下等價： |
| tags() | HTMLAllCollection | 根據標籤名擷取元素。在HTMLAllCollection中定義 |
| namedItem() | object | 根據name或者id屬性擷取集合中的元素，區別如下： 1、在HTMLCollection中，先根據name尋找，在根據id尋找，但是只返回第一個符合的元素。若不存在符合的元素則返回null。存在如下等價： 2、在HTMLAllCollection中，若有多個符合的元素，則返回一個HTMLCollection對象；若只有一個符合元素，則返回該元素。 3、在HTMLFormControlsCollection中，若有多個符合的元素，則返回一個RadioNodeList對象；若只有一個符合元素，則返回該元素。 |
二、HTMLOptionsCollection介面
該介面返回一組元素組成的列表，與HTMLCollection不同的是，它特定於返回的是一組option元素責成的列表，並且重寫了length屬性和namedItem()方法。HTMLSelectElement.options屬性返回的資料類型就是HTMLOptionsCollection。
| 屬性或方法名 | 資料類型 | 說明 |
| length | long | 可讀寫。若屬性值大於實際的option元素個數，則HTMLSelectElement自動添加空的option元素; 若屬性值小於實際的option元素個數，則HTMLSelectElement自動刪除多餘的option元素 |
| add() | void | 插入一個option元素 |
| namedItem() | object | 根據name或id擷取集合中的元素 |
| remove() | void | 刪除一個option元素 |
三、DOMTokenList和DOMSettableTokenList
DOMTokenList表示空格隔開的一系列標識。在DOM筆記（三）：Element介面和HTMLElement介面中,HTMLElement.classList屬性返回的資料類型就是DOMTokenList。DOMSettableTokenList繼承自DOMTokenList，唯一不同的就是增加了value屬性。HTMLLinkElement.size返回的資料類型是DOMSettableTokenList。
| 屬性或方法 | 資料類型 | 說明 |
| length | long | 集合中標識的數量 |
| value | DOMString | 擷取或設定DOMTokenList值 |
| add() | void | 插入一個標識 |
| contains() | boolean | 判斷是否包含某標識 |
| remove() | void | 刪除一個標識 |
| item() | object | 根據索引擷取標識 |
| toggle() | boolean | 標識存在則刪除，不存在則添加 |
| toString() | DOMString | 返回對象的字串形式 |
四、DOMStringMap和NodeList
DOMStringMap介面標示一些“鍵/值對”組成的集合，可以通過JavaScript文法對索引值對進行刪除、修改等操作。在DOM筆記（三）：Element介面和HTMLElement介面中,HTMLElement.dataset屬性返回的資料類型就是DOMStringMap
<html><head> <title>DOMStringMap</title></head><body> <img id="ex" data-ship-id="92432" data-x="30" data-y="10" data-z="90"/> <script> var img = document.getElementById("ex"); //訪問索引值 alert(img.dataset.z); //設定索引值 img.dataset.shipId="343434"; //建立新索引值對 img.dataset.defend=100; //刪除索引值 delete img.dataset.y; </script></body></html>
NodeList介面表示一系列節點群組成的列表。document.getElementsByTagName()返回的是NodeList對象。其有一 個唯讀length屬性，用於返回節點的數量；還有一個item()方法，用於根據索引訪問節點。有如下等價方式：
nodelist.item(0) <=>nodelist[0]<=>nodelist(0)
原文首發：http://www.ido321.com/1324.html
下一篇：DOM筆記（五）：JavaScript的常見事件和Ajax小結
DOM筆記（四）：HTML 5 DOM複雜資料類型
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
