关于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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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之第五天
2006/10/09 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
TensorFlow实现RNN循环神经网络
2018/02/28 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python实现程序重启和系统重启方式
2020/04/16 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
质检的岗位职责
2013/11/17 职场文书
基层干部十八大感言
2014/01/19 职场文书
手机促销活动方案
2014/02/05 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
党日活动总结
2014/05/07 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
企业宣传稿范文
2015/07/23 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python