DOM操作之自定义属性

目录：

DOM操作之自定义属性1、介绍2、作用3、获取属性值3.1 区别4、设置属性值4.1 区别5、移除属性6、H5自定义属性6.1 作用6.2 注意6.2 规则

1、介绍

​ 我们在学习JavaScript中的DOM时，可以在使用DOM操作元素的时候，给元素添加一些原本没有的属性，来记录一些不重要的数据。

2、作用

​ 在使用自定义属性的时候，我们可以将标签来记录一些不保密的数据，但是又要跟随元素变化而变化的数据。

3、获取属性值

元素对象.属性名元素对象.getAttribute(属性名)

<input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");var value = tBox.getAttribute("type");console.log(value);}</script>

3.1 区别

​ 通过(对象名.属性名)获取到的时元素的属性值，并且对css属性以css形式返回。但不能获取自定义属性的值。而通过(对象名.getAttribute(属性名))获取属性值，返回的结果以字符串体现，可以获取到自定义属性的值。

4、设置属性值

元素对象.属性名=属性值；

元素对象.setAttribute(属性名,属性值)；

**注意：**属性名完全按照元素原本的属性名设置，否则将是自定义属性

4.1 区别

​ 通过(元素对象.属性名=属性值)的方式只能设置元素对象原有的一些属性，无法设置自定义属性。而通过(元素对象名.setAttribute(属性名，属性值))的方式可以设置任何属性，包括自定义属性

5、移除属性

//移除格式：元素对象.removerAttribute("属性名");// 案例：<input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");// 设置自定义属性tBox.setAttribute("data-name", "123456");//移除自定义属性tBox.removerAttribute("data-name");}</script>

6、H5自定义属性

6.1 作用

​ 为了保存一些不重要的数据，这些数据可以保存到页面里，而这些数据不需要保存到服务器数据库中。

6.2 注意

自定义属性获取和创建基本数都是通过与Attribute有关的两个函数实现的自定义属性有可能会产生很多歧义，并且不是很好区分标签的原有属性和自定义属性为此，H5新增了自定义属性

6.2 规则

H5里面规定自定义属性必须以"data-"开头作为属性名称并赋值

获取H5自定义属性和设置自定义属性依然使用Attribute函数

在H5里面新增了dataset属性（在IE11里面才能被支持），dataset属性会将这个元素的所有自定义属性全部以键值对的方式保存起来，并且也可以通过该属性获取属性值

//dataset属性获取属性值的格式：元素名.dataset.属性名;元素名.data["属性名"]；//注意：这里的属性名不包含data-//案例：<input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");// 设置自定义属性tBox.setAttribute("data-name", "123456");// 输出dataset属性值保存的自定义属性和值console.log(tBox.dataset);//通过dataset属性获取自定义属性的值console.log(tBox.dataset["name"]);console.log(tBox.dataset.name);}</script>