得出结论: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而不是classNamediv.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>