【JavaScript教程】DOM——属性的操作

3.3、Element.getAttributeNames()

Element.getAttributeNames()返回一个数组&＃xff0c;成员是当前元素的所有属性的名字。如果当前元素没有任何属性&＃xff0c;则返回一个空数组。使用Element.attributes属性&＃xff0c;也可以拿到同样的结果&＃xff0c;唯一的区别是它返回的是类似数组的对象。

var mydiv &＃61; document.getElementById(&＃39;mydiv&＃39;);

mydiv.getAttributeNames().forEach(function (key) {
var value &＃61; mydiv.getAttribute(key);
console.log(key, value);
})

上面代码用于遍历某个节点的所有属性。

3.4、Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在&＃xff0c;则相当于编辑已存在的属性。该方法没有返回值。

// HTML 代码为
// Hello World
var b &＃61; document.querySelector(&＃39;button&＃39;);
b.setAttribute(&＃39;name&＃39;, &＃39;myButton&＃39;);
b.setAttribute(&＃39;disabled&＃39;, true);

上面代码中&＃xff0c;button元素的name属性被设成myButton&＃xff0c;disabled属性被设成true。

这里有两个地方需要注意&＃xff0c;首先&＃xff0c;属性值总是字符串&＃xff0c;其他类型的值会自动转成字符串&＃xff0c;比如布尔值true就会变成字符串true&＃xff1b;其次&＃xff0c;上例的disable属性是一个布尔属性&＃xff0c;对于元素来说&＃xff0c;这个属性不需要属性值&＃xff0c;只要设置了就总是会生效&＃xff0c;因此setAttribute方法里面可以将disabled属性设成任意值。

3.5、Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值&＃xff0c;表示当前元素节点是否包含指定属性。

var d &＃61; document.getElementById(&＃39;div1&＃39;);

if (d.hasAttribute(&＃39;align&＃39;)) {
d.setAttribute(&＃39;align&＃39;, &＃39;center&＃39;);
}

上面代码检查div节点是否含有align属性。如果有&＃xff0c;则设置为居中对齐。

3.6、Element.hasAttributes()

Element.hasAttributes方法返回一个布尔值&＃xff0c;表示当前元素是否有属性&＃xff0c;如果没有任何属性&＃xff0c;就返回false&＃xff0c;否则返回true。

var foo &＃61; document.getElementById(&＃39;foo&＃39;);
foo.hasAttributes() // true

3.7、Element.removeAttribute()

Element.removeAttribute方法移除指定属性。该方法没有返回值。

// HTML 代码为
//


document.getElementById(&＃39;div1&＃39;).removeAttribute(&＃39;align&＃39;);
// 现在的HTML代码为
//

4、dataset 属性

有时&＃xff0c;需要在HTML元素上附加数据&＃xff0c;供 Javascript 脚本使用。一种解决方法是自定义属性。

<div id&＃61;"mydiv" foo&＃61;"bar">

上面代码为div元素自定义了foo属性&＃xff0c;然后可以用getAttribute()和setAttribute()读写这个属性。

var n &＃61; document.getElementById(&＃39;mydiv&＃39;);
n.getAttribute(&＃39;foo&＃39;) // bar
n.setAttribute(&＃39;foo&＃39;, &＃39;baz&＃39;)

这种方法虽然可以达到目的&＃xff0c;但是会使得 HTML 元素的属性不符合标准&＃xff0c;导致网页代码通不过校验。

更好的解决方法是&＃xff0c;使用标准提供的data-*属性。

<div id&＃61;"mydiv" data-foo&＃61;"bar">

然后&＃xff0c;使用元素节点对象的dataset属性&＃xff0c;它指向一个对象&＃xff0c;可以用来操作 HTML 元素标签的data-*属性。

var n &＃61; document.getElementById(&＃39;mydiv&＃39;);
n.dataset.foo // bar
n.dataset.foo &＃61; &＃39;baz&＃39;

上面代码中&＃xff0c;通过dataset.foo读写data-foo属性。

删除一个data-*属性&＃xff0c;可以直接使用delete命令。

delete document.getElementById(&＃39;myDiv&＃39;).dataset.foo;

除了dataset属性&＃xff0c;也可以用getAttribute(&＃39;data-foo&＃39;)、removeAttribute(&＃39;data-foo&＃39;)、setAttribute(&＃39;data-foo&＃39;)、hasAttribute(&＃39;data-foo&＃39;)等方法操作data-*属性。

注意&＃xff0c;data-后面的属性名有限制&＃xff0c;只能包含字母、数字、连词线&＃xff08;-&＃xff09;、点&＃xff08;.&＃xff09;、冒号&＃xff08;:&＃xff09;和下划线&＃xff08;_)。而且&＃xff0c;属性名不应该使用A到Z的大写字母&＃xff0c;比如不能有data-helloWorld这样的属性名&＃xff0c;而要写成data-hello-world。

转成dataset的键名时&＃xff0c;连词线后面如果跟着一个小写字母&＃xff0c;那么连词线会被移除&＃xff0c;该小写字母转为大写字母&＃xff0c;其他字符不变。反过来&＃xff0c;dataset的键名转成属性名时&＃xff0c;所有大写字母都会被转成连词线&＃43;该字母的小写形式&＃xff0c;其他字符不变。比如&＃xff0c;dataset.helloWorld会转成data-hello-world。