关于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 相关文章推荐
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
puppeteer库入门初探
Jan 09 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
深入浅析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
模仿OSO的论坛(三)
2006/10/09 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php验证码生成代码
2015/11/11 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
js常用DOM方法详解
2017/02/04 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python实现备份目录的方法
2015/08/03 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
企划主管岗位职责
2013/12/12 职场文书
军训考核自我鉴定
2014/02/13 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
财务会计专业求职信
2014/06/09 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
Django实现聊天机器人
2021/05/31 Python