关于HTML5的data-*自定义属性的总结


Posted in Javascript onMay 05, 2018

本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考,具体如下:

一、关于html元素的特性

1.html元素都存在一些标准的特性:

    id 元素在文档中的唯一标识符;

    title 有关元素的附加说明信息,一般通过工具提示条显示出来;

    lang 元素内容的语言代码,很少使用;

    dir 语言的方向,很少使用;

    className,与元素的class特性对应,考虑到与ECMAScript的保留字class的冲突,因此命名为className;

2.操作特性的方法:

    getAttribute() 获取相关特性,也可以获取到自定义的特性,区别于使用DOM元素的属性获取;   

    setAttribute() 设置相关特性; 

    removeAttribute() 删除相关特性;

3.关于获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别 :

例如:

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现:

getAttribute()既可以访问标准特性也可以访问自定义特性,而是用DOM元素本身属性访问html元素特性的时候只能访问标准特性。

原因:

html元素中只有标准特性才会以属性的形式添加到DOM对象中。

特殊情况:

有两类特性,虽有在DOM对象中有对应的属性名,但是属性的值与通过getAttribute()返回的值并不相同。

1.style特性:

使用DOM对象属性访问style的时候,返回的是一个对象,而使用getAttribute()方法获取的时候返回的是css文本。

2.事件处理程序(例如:onclick):

使用DOM对象的属性访问的时候,返回的是一个JavaScript函数,而通过getAttribute()方法获取时返回的是javas代码。

使用方法:

只有在获取自定义特性的时候使用getAttribute()方法,操作DOM的时候,使用对象的属性来获取。

二、Html5中的自定义属性

1.Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。

2.使用getAttribute()方法以及setAttribute()方法操作自定义属性。

例如:

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

上述示例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自定义属性。

3.使用dataset操作自定义属性

例如:

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

以上示例展示了使用dataset属性来操作自定义属性。dataset属性的值是一个DOMStringMap的一个示例,是一个名值对的映射。在这个映射中,每个data-name的形式的属性都有一个对应的属性,不同的是属性名中没有data-前缀。(比如,自定义属性是data-name,映射中对应的属性就是name).还有一点需要注意的是如果data-属性名中包含了连字符(比如:data-date-of-birth),则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示。

4.dataset属性的兼容性问题

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

5.使用data-属性选择器

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  div{
    width:100px;
    height:200px;
    margin:20px;
  }
  div[data-name="monster"]{
    background-color: green;
  }
  div[data-name="monster1935"]{
    background-color: red
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 #Javascript
详解js跨域请求的两种方式,支持post请求
May 05 #Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
angular 服务随记小结
2019/05/06 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
简单的Python人脸识别系统
2020/07/14 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
班班通校本培训方案
2014/03/12 职场文书
一年级小学生评语
2014/04/22 职场文书
成本会计岗位职责
2015/02/03 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js