关于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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
js Dialog 实践分享
Oct 22 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
php7下的filesize函数
2019/09/30 PHP
Javascript实现的分页函数
2007/02/07 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
婚庆司仪主持词
2014/03/15 职场文书
行政主管岗位职责
2015/02/03 职场文书
初中语文教学随笔
2015/08/15 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技