H5新增规范(delete设置非法属性)

前言

在HTML中什么是合法属性和非法属性？？

<div id="box" class="div" fn='lala' hua='lll'></div>

比如说我们常用的标签：p,div,span.ul.ol,li,img 这些是W3C这些开发人员制定的原生的标签

当然class id title属性也是W3C这些开发人员制定的合法属性

当前现在的fn和hua是非法属性W3C这些开发人员根本没有给div制定fn和hua这个属性

非法属性也能是显示到页面当中的

合法属性和非法属性的区别

1. 合法属性是：本身标签是存在这个属性是天生就有的这就叫做合法属性
2. 非法属性是：本身表示是不存在这个属性的是人为随便设置的这就叫做非法属性

但是你这样写谁知道你写的是非法属性呢？？

HTML5这套规范你觉得你这样写有点乱 就想把这些非法属性整合到一块去

让你一看就知道是非法属性(给非法属性打上标记)

就是让某些非法属性以某些字母开头的 非法属性为了区分合法属性我在写法上就专门的以某个字母开头

HTML5规范只要是非法属性前面开头必须加上data 这样就是一个非法属性了

HTML5规范了非法属性以data开头 为了区分合法属性和非法属性

基础知识

1. html5规范 非法属性以data开头，以data开头的非法属性我们才能操作非法属性

2. 节点上面的所有非法属性 都存储在 dom.dataset对象当中 

3. 节点.dataset.非法属性 ；获取非法属性

4. 节点.dataset.非法属性 = '内容' ；设置非法属性

5.  delete 节点.dataset.非法属性 delete关键词删除非法属性

6. 节点.dataset.新增非法属性= '内容'; 添加非法属性

非法属性的操作和对象中的操作是完全一致的

那该怎么获取这些非法属性呢???

<div id="box" class="div" data-fn='lala' data-hua='lll'></div>
<script>
    var oDiv = document.querySelector('div');
    console.log(oDiv.dataset.fn)
</script>

节点上面的所有的非法属性都存储在节点.dataset对象当中，这个对象是所有非法属性的集合

<div id="box" class="div" data-fn='lala' data-hua='lll'></div>
<script>
    var oDiv = document.querySelector('div');
    //查询使用的非法属性
    console.log(oDiv.dataset)
</script>

注意：在HTML节点上面的非法元素以data-非法属性开头的元素才能被dataset对象存储在非法属性集合当中和以及操作

设置非法属性名

<div id="box" class="div" data-fn='lala' data-hua='lll'></div>
<script>
    var oDiv = document.querySelector('div');
    oDiv.dataset.hua = '我是通过dataset方式设置的非法属性名';
</script>

删除非法属性名

删除非法属性名和删除对象名的方法一致都是通过delete关键词删除的

删除对象属性名

var obj = {
    name:"huasheng",
    age:20,
}
delete obj.age;//通过delete关键词删除obj中的age属性
console.log(obj)

删除非法属性名

var oDiv = document.querySelector('div');
delete oDiv.dataset.hua;//通过delete关键词删除非法属性名
console.log(oDiv.dataset)

增加非法属性名

<div id="box" class="div" data-fn='lala' data-hua='lll'></div>
<script>
    var oDiv = document.querySelector('div');
    //huasheng为增加的属性名
    oDiv.dataset.huasheng = '我是增加的非法属性名huasheng';
    console.log(oDiv.dataset);
</script>