得出结论:element .属性只能获取内置对象属性值,而element.getAtrribute(‘属性’)不仅可以获取内置对象属性值,还可以获取自定义属性值
获得属性值案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- id是内置对象属性 index是自定义属性,因为html中没有这个属性的存在 -->
<div id="c4" index="1"></div>
<script>
//获得元素对象
var div = document.querySelector('div');
//元素对象.属性 是用来获取内置对象的属性
console.log(div.id)
//元素对象.getAttribute('属性') 是用来获取自定义属性的值
console.log(div.getAttribute('index'));
</script>
</body>
</html>
得出结论:element .属性=‘值’ 只能设置内置对象属性值,而element.setAtrribute(‘属性’,‘属性值’) 不仅可以设置内置对象属性值,还可以设置自定义属性值
设置属性值案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- id是内置对象属性 index是自定义属性,因为html中没有这个属性的存在 -->
<div id="c4" index="1" class="dis"></div>
<script>
//获得元素对象
var div = document.querySelector('div');
//想要获取类名必须用className,因为class是一个关键字
console.log(div.className);
//设置元素对象属性
div.className='c4';
console.log(div.className);
//class特殊这里面写的是class而不是className
div.setAttribute('class' , 'c5');
console.log(div.getAttribute('class'));
</script>
</body>
</html>
移除属性案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- id是内置对象属性 index是自定义属性,因为html中没有这个属性的存在 -->
<div id="c4" index="1" class="dis"></div>
<script>
//获得元素对象
var div = document.querySelector('div');
//移除属性removeAttribute('属性');
div.removeAttribute('id');
</script>
</body>
</html>