WebAPI(part6)--自定义属性操作 _操作

仓廪实则知礼节，衣食足则知荣辱。这篇文章主要讲述WebAPI(part6)--自定义属性操作相关的知识，希望能为你提供帮助。
学习笔记，仅供参考，有错必究

文章目录

??Web API??

??自定义属性操作??

??获取属性值??
??设置属性值??
??移除属性??

Web API 自定义属性操作
获取属性值获取属性值的两种方式：

//第1种
element.属性
//第1种
element.getAttribute(属性);

区别：

获取方式	区别
?`?element.属性?`?	【WebAPI(part6)--自定义属性操作】?`?element.属性?`?只能获取元素自带的属性，比如id, class
?`?element.getAttribute(属性); ?`?	?`?element.getAttribute(属性); ?`??主要获取自定义的属性，比如我们自己定义?`?data-index?`?属性，就可以通过这种方式获取

举个例子

代码：

< !DOCTYPE html>
< html lang="en">

< head>
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title> Document< /title>

< /head>

< body>
< div id="demo" data-index="1" class="nav"> hh< /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(data-index));
< /script>

< /body>

< /html>

查看DevTools：

设置属性值设置属性值的两种方式：

//第1种
element.属性 = 值
//第2种
element.setAttribute(属性, 值);

区别：

获取方式	区别
?`?element.属性 = 值?`?	?`?element.属性 = 值?`?只能设置元素自带的属性，比如id, class
?`?element.setAttribute(属性, 值); ?`?	?`?element.getAttribute(属性); ?`??设置自定义的属性，比如我们自己定义?`?data-index?`?属性，就可以通过这种方式设置

举个例子

代码：

< !DOCTYPE html>
< html lang="en">

< head>
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title> Document< /title>

< /head>

< body>
< div id="demo" data-index="1" class="nav"> hh< /div>
< script>
var div = document.querySelector(div);

console.log(div.id);
console.log(div.className);
console.log(div.getAttribute(data-index));

// (1) element.属性= 值
div.id = test;
div.className = your-body;
// (2) element.setAttribute(属性, 值); 主要针对于自定义属性
div.setAttribute(data-index, 2);

console.log(div.id);
console.log(div.className);
console.log(div.getAttribute(data-index));
< /script>

< /body>

< /html>