DOM系列之自定义属性操作

---

1、获取属性值

element.属性
element.getAttribute(‘属性’)

1.1、区别

element.属性：获取内置属性值（元素本身自带的属性）；
element.getAttribute(‘属性’)：主要获得自定义的属性（标准），我们自定义的属性。

1.2、示例

<div id="demo" index="1" class="nav"></div>
<script>
	var div = document.querySelector("div");
	// 1. 获取元素的属性值
	// (1) element.属性
	console.log(div.id);
	//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
	console.log(div.getAttribute("id"));
	console.log(div.getAttribute("index"));
</script>

2、设置属性值

element.属性 = ‘值’
element.setAttribute(‘属性’, ‘值’);

2.1、区别

element.属性 = ‘值’设置内置属性值；
element.setAttribute('属性', ‘值’)主要设置自定义的属性；

2.2、示例

// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = "test";
div.className = "navs";
// (2) element.setAttribute('属性', '值');  主要针对于自定义属性
div.setAttribute("index", 2);
div.setAttribute("class", "footer"); // class 特殊  这里面写的就是

3、移除属性

element.removeAttribute(‘属性’);

3.1、示例

// class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute("index");

4、H5自定义属性

4.1、自定义属性的目的

为了保存并使用数据，有些数据可以保存到页面中而不是保存到数据库中。

4.2、设置H5自定义的属性

H5规定自定义属性data-开头作为属性名并且赋值。

比如<div data-index="1"></div>

或者使用JS设置

扫描二维码关注公众号，回复： 14386332 查看本文章

element.setAttribute('data-index', 2)

4.3、获取H5自定义属性

1、兼容性获取

element.getAttribute(‘data-index’);

2、H5新增,IE11才开始支持

element.dataset.index
或者
element.dataset[‘index’]

4.4、示例

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
	var div = document.querySelector("div");
	// console.log(div.getTime);
	console.log(div.getAttribute("getTime"));
	div.setAttribute("data-time", 20);
	console.log(div.getAttribute("data-index"));
	console.log(div.getAttribute("data-list-name"));
	// h5新增的获取自定义属性的方法 它只能获取data-开头的
	// dataset 是一个集合里面存放了所有以data开头的自定义属性
	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>

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！