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

DOM扩展之 HTML5的更多相关文章

  1. DOM扩展之HTML5 插入标记

    11.3.6 插入标记 当需要在文档中插入大量的HTML标记时,通过DOM操作就会是非常麻烦的,相对而言,使用插入标记的技术,直接插入HTML字符串不仅简单而且更快.以下插入标记相关的DOM操作已经纳 ...

  2. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  3. HTML5学习笔记(二十四):DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  4. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  5. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  6. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

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

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  8. js-DOM,DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  9. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

随机推荐

  1. 搭建nginx+tomcat+Java的负载均衡环境

    转载  未测 供参考 另外这篇文章也不错.http://blog.csdn.net/wang379275614/article/details/47778201 一.简介: Tomcat在高并发环境下 ...

  2. markdown小记

    一直听说用markdown写文档比较符合程序员的逼格,没事就倒腾了下,附上近期整理的精华,留自己以方便查阅. 1.常用指令 单个回车 视为空格. 连续回车 才能分段. 行尾加两个空格,这里-> ...

  3. VMware中linux配置1-安装VMware tool 共享文件夹

    linux:ubuntu 14 安装Linux,使用的ubuntu-14.04.1-desktop-amd64.iso 安装的,这个就不写了. 为了在linux中访问windows的目录,需要安装VM ...

  4. 版本控制简介,git使用----使用GitHub托管代码

    关于版本控制: 很久以前,人们苦于对写过的代码进行版本的管理,经常过了一段时间想恢复原来写过的代码却又忘了不知道丢到哪儿去了,有的人用加上时间后缀来命名文件的方法,便于后期维护,但是这样做的麻烦也很大 ...

  5. 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳

    <Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...

  6. Mongodb 副本集分片(二)---mongodb副本集部署脚本详解

    分享下,最近做的一主一从一仲裁的示例,如有需要,大家可以扩展成一主两从一仲裁. 大家可以看到  我的集群名字沿用了默认的neunnm,如果是其他的话   大家注意修改. 需要辅助文件hosts.con ...

  7. Mongodb 副本集分片(一)---初始化mongodb安装启动

    写在前面:mongodb是nosql非关系型数据库中,比较受欢迎的产品.在数据持久化及与关系型数据库的关联上也做的比较好,目前各大公司在存放二进制文件(图片.视频等)中应用也比较广泛.其遵循的key- ...

  8. Android6.0获取权限

    照着<第一行代码>打代码,然并卵,感叹技术进步的神速.最后提醒一点:IT类的书籍一定要注意出版时间!出版时间!出版时间!重要的事情说三遍 问题出在android6.0的权限获取问题上,以前 ...

  9. docker定制化镜像的构建及基于该定制的镜像创建容器

    1.在项目里创建Dockerfile(注意大小写)文件,执行构建命令:docker build -t tiny-node-1 /root/tiny-node-docker    其中tiny-node ...

  10. Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project LogTest: Compilation failure -> [Help 1]

      [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default ...