1.1 HTML基本属性操作
- element.属性名 设置或返回元素的指定属性。
- element.className 设置或返回元素的 class 属性。
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
Element 对象使用 . 可以调用对象的各个属性。当 html 中的标签的属性,只有一个值的时候, DOM 中对应的元素的属性值是布尔类型。
1.2 HTML方法操作属性
1、element.getAttribute() 返回元素节点的指定属性值。
- getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
document.getElementById('box').getAttribute('id');//获取元素的id 值
document.getElementById('box').id; //获取元素的id 值
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv //获取元素的自定义属性值,非IE 不支持
document.getElementById('box').getAttribute('class');//获取元素的class 值
2、element.setAttribute() 把指定属性设置或更改为指定值。
- setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本已存在,那么就会被覆盖。
document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值
3、element.removeAttribute() 从元素中移除指定属性。
- removeAttribute()可以移除 HTML 属性。
document.getElementById('box').removeAttribute('style');//移除属性
使用属性只能来获取和设置的是元素对象原始属性;使用方法可以用来设置元素对象自定义的属性。
4、element.hasAttribute(name) 检查特性是否存在。
1.3 HTML5的data-*自定义属性
HTML5
的
data-*
自定义属性,它们可以在
dataset
属性中获取到的
<body>
<!-- 以data-打头的,叫html5中的自定义属性 -->
<div class="father" age="18" data-score="88" data-address="bj">
我是一个孤独的DIV
</div>
<script>
let boxEle = document.querySelector(".father");
console.log(boxEle.dataset);
console.log(boxEle.dataset.score);
console.log(boxEle.dataset.address);
</script>
</body>