DOM扩展之 HTML5

11.3.1 与类相关的扩充

2. classList属性

在操作类名时,需要通过className属性添加,删除和替换类名。因为className是一个字符串,所以即使只修改一部分内容也要设置整个字符串的值。

如<div class="user name age"></div> 则其className 为"user name age"。

HTML5新增了一种操作类名的方式,即为所有元素添加了classList属性。classList属性是新集合类型DOMTokenList的实例。 与其他DOM集合类似,DOMTokenList有一个表示自己有多少元素的length属性,

取得每个元素可以使用item()方法,也可以使用方括号语法。

新类型还定义如下方法:

  1. add(value)
  2. contains(value)
  3. remove(value)
  4. toggle(value)

如: div.classList.remove("user")

11.3.5 自定义数据属性

HTML5规定可以为元素添加自定义属性,格式是 data-**的形式,目的是为元素提供与渲染无关的信息,或者提供语义信息。

如:<div id="mydiv" data-user="42342324"></div>

添加之后,可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例,也就是一个名值对映射。在这个映射中每一个data-**形式的自定义属性都有一个对应的映射,只不过属性名没有data-前缀。

var user =document.getElementById(‘#mydiv‘).dataset.user; //42342324

时间: 2024-10-14 07:12:54

DOM扩展之 HTML5的相关文章

DOM扩展之HTML5 插入标记

11.3.6 插入标记 当需要在文档中插入大量的HTML标记时,通过DOM操作就会是非常麻烦的,相对而言,使用插入标记的技术,直接插入HTML字符串不仅简单而且更快.以下插入标记相关的DOM操作已经纳入了HTML5规范. 1. innerHTML 属性 在读模式下,innerHTML属性返回调用元素所有的子节点对应的HTML标记,包括元素,注释和文本节点.在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用该DOM树完全替换调用元素的所有的子节点. 不是所有的元素都支持inner

HTML5 DOM扩展

DOM相对应Html5的扩展 一.选择符API 1. querySelector()方法 :接收一个CSS选择符 ,返回与该模式匹配的第一个元素,若没有匹配到返回null. 其中通过Document类型调用querySelector()方法时,会在文档元素范围内查找匹配元素: 如var body =  document.querySelector("body"); 通过Element类型调用querySelector()时,只会在该元素后代元素的范围内查找匹配元素 如var img =

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

JavaScript学习 八、DOM扩展

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5.这两个扩展都是源自开发社区.此外还有一个不那么因为瞩目的ELement Traversal(元素遍历)规范.为DOM添加了一些属性. 选择符API 众多JavaScript 库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素. 实际上 jQuery 的核心就是通过CSS选择符查询DOM 文档取得元素的引用,从而抛开了 getElementById() 和 getElementsByTagName

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大

DOM扩展:DOM API的进一步增强[总结篇-下]

本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档插入大量HTML标记的时候操作还是很繁杂的,每次插入一个元素,不仅要调用创建元素和文本节点的接口,还要调用appendChild等向文档中添加元素的接口,而且在添加时还要按照正确的顺序.而如果使用插入标记的方法,直接向文档中插入HTML字符串,由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中,这

JavaScript的DOM扩展

虽然 DOM 为与 XML 及 HTML 文档交互制定了一系列核心 API,但仍然有几个规范对标准的 DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实现.本章介绍的三个这方面的规范如下. 1 Selectors API,定义了两个方法,让开发人员能够基于 CSS 选择符从 DOM中取得元素,这两个方法是 querySelector() 和 querySelectorAll() . 2 Element Traversal,为 DOM 元素

10. javacript高级程序设计-DOM扩展

1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有匹配的NodeList元素 1.2 HTML5 1.2.1 与类相关的扩充 l getElementsByClassName() 接收一个参数,一个包含一或者多个类名的字符串,返回带有指定类的所有元素的NodeList l classList属性,add(value),contains(value)

JavaScript学习笔记(十一)---- DOM扩展

(一)DOM扩展 对DOM的主要的扩展是SelectorsAPI(选择符API)和HTML5,还有一个Element Travesal规范. 1.选择符API jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById( ) 和 getElementsByTagName( ). Selectors API Level 1的核心是两个方法:querySelector( )和 querySelectorAll( ). querySelector( ):