DOM：获取和设置元素的属性值，element.属性和element.getAttribute(“属性“)

获取属性值
1.element.属性：获取元素属性值
注意：element属性想要获取元素类的属性值要用className，而不是class。

<div class="box"></div>
<script>
var box = document.querySelector(".box");
console.log(box.className); // 输出box
</script>

2.element.getAttribute(“属性”); 获取元素属性值
注意：element.getAttribute(“属性”)想要获取元素类的属性值要用class，而不是className。

<div class="box"></div>
<script>
var box = document.querySelector(".box");
console.log(box.getAttribute("class")); // 输出box
</script>

element.属性和element.getAttribute(“属性”)的区别：
element.属性可以获取内置属性值，也就是元素本身自带的属性，比如id class src等。
element.getAttribute(“属性”)主要获得我们自定义的属性。

// index_1 就是我们自定义的属性
<div class="box" index_1="0"></div>
<script>
var box = document.querySelector(".box");
console.log(box.getAttribute("index_1")); // 输出0
console.log(box.index_1); // 用element.属性会输出undefined
</script>

设置属性值
1.element.属性 = “新值”;

<div class="box" index_1="0"></div>
<script>
var box = document.querySelector(".box");
console.log(box.className = "nav"); // 执行后div的class会变为nav
</script>

2.element.setAttribute(“属性”,“新值”);

<div class="box" index_1="0"></div>
<script>
var box = document.querySelector(".box");
console.log(box.setAttribute("class","info")); // div的class会变为info
console.log(box.setAttribute("index_1","2")); // index_1的值会变为2
</script>