DOM自定义属性操作

DOM标准

（一）核心DOM

可以操作一切结构化文档的API，包括HTML和XML，核心DOM是万能的，但又是繁琐的。

（二）HTML DOM

专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化，HTML DOM不是万能的，但更加简单。

注意：在开发中先使用简单的，简单的不行再使用复杂的进行补充，以实现效果为目标。

自定义属性的操作

一、获取属性值

element.属性 获取属性值

element.getAttribute('属性'); 获取自定义属性（我们自己添加的属性）

区别：

element.属性; 获取元素内置属性（元素本身自带的属性）

element.getAttribute('属性'); 主要获得自定义的属性（标准）程序员自定义的属性

注意：

class是保留关键字，但是在element.getAttribute('属性'); 方法中可以直接使用；element.属性写法则需要使用className代替

实例：

获取div元素中的自带属性和自定义属性

 <body>

     <div class="first" index="ww"></div>

 <script>

     var div = document.querySelector('div');

     //element.属性  获取内置属性（元素本身自带的属性）

     console.log(div.className);

     //element.getAttribute('属性')  获得自定义属性

     console.log(div.getAttribute('index'));

     console.log(div.getAttribute('class'));

 </script>

 </body>

 </html>

二、设置属性值

element.属性 = '值'; 设置内置属性值

element.setAttribute('属性','值'); 主要针对自定义属性

实例：

<body>

    <div class="first" index="ww" id='ss'></div>

<script>

    var div = document.querySelector('div');

    console.log(111111);

    // element.属性 = ‘值’

    div.id = 'box';

    div.className = 'navs';

    //element.setAttribute('属性名','值')

    div.setAttribute('index','111');

    div.setAttribute('class','footer');

</script>

</body>

三、移除属性

element.removeAttribute("属性名")； 移除指定的属性

实例：

<body>

    <div class="first" index="ww" id='ss'></div>

<script>

    var div = document.querySelector('div');

    div.removeAttribute('index');

</script>

</body>

四、判断是否包含指定的属性

element.hasAttribute("属性名"); 判断元素里面有没有对应的属性名

结果会返回布尔类型的值，true或false

实例：

<body>

    <div class="first" index="ww" id='ss'></div>

<script>

    var div = document.querySelector('div');

    div.removeAttribute('index');

    console.log(div.hasAttribute('index'));

    console.log(div.hasAttribute('class'));

</script>

</body>

五、HTML5自定义属性

自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过 getAttribute('属性') 方法获取

但是有些自定义属性很容易引起歧义，不容易判断到底是元素内部的属性还是自定义属性

H5中为我们新增了标准

（一）设置H5自定义属性

H5中规定自定义属性需要以 data- 开头做属性名并且赋值

例如：<div data-index="ww" ></div>

也可以使用JS设置新的自定义属性

例如：element.setAttribute('data-index','111');

（二）获取H5自定义属性

1、兼容性较好的获取方法

getAttribute('属性')

2、H5新增方法（从IE11才开始支持，兼容性较差）

element.dataset.属性;

element.dataset[ '属性' ];

dataset 可以理解成集合的意思，获得所有以 data-开头的 自定义属性，data-开头的自定义属性的集合

注意：如果自定义属性里面有多个 - 连接的属性名称，使用H5新增方法获取的时候需要采用驼峰命名法

实例：

 <body>

     <div data-index="ww" data-time='20' data-list-name='name'></div>

 <script>

     var div = document.querySelector('div');

     console.log(div.getAttribute('data-list-name'));

     //H5新增获取属性的方法

     console.log(div.dataset);

     console.log(div.dataset.index);

     console.log(div.dataset['index']);

     console.log(div.dataset.listName);

     console.log(div.dataset['listName']);

 </script>

 </body>