DOM笔记（四）：HTML 5 DOM复杂数据类型_html/css_WEB-ITnose
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"/ alt="DOM笔记（四）：HTML 5 DOM复杂数据类型_html/css_WEB-ITnose" > <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)
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML与CSS和JavaScript：比较Web技术
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
HTML：是编程语言还是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？
Apr 28, 2025 pm 05:42 PM
本文讨论了HTML标签，和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。
