【EASYDOM系列教程】之属性操作

Element 对象提供了一些方法实现 HTML 元素的属性操作，这种操作要比 Node 对象提供的方法操作属性节点要更便捷。

获取指定元素的属性

Element 对象提供了 getAttribute() 方法用于获取指定元素的属性值，其语法结构如下:

var attribute = element.getAttribute(attributeName);

在上述语法结构中，调用 getAttribute() 方法的 element 表示指定的元素，传递的参数 attributeName 则表示指定的属性名，得到的是指定属性对应的值。

值得注意的是: 如果指定的属性不存在，则返回 null 或 "" （空字符串）。

我们可以通过以下示例代码，学习 getAttribute() 方法的具体使用:

var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
console.log(className);

Element 对象提供了 setAttribute() 方法用于设置指定元素的属性值，其语法结构如下:

element.setAttribute(name, value);

在上述语法结构中，调用 setAttribute() 方法的 element 表示指定的元素，传递的参数 name 表示设置指定的属性名，value 表示设置指定属性的值。

值得注意的是: 如果该属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。

我们可以通过以下示例代码，学习 setAttribute() 方法的具体使用:

var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
className += ' animate';
btn.setAttribute('class',className);

Element 对象提供了 removeAttribute() 方法用于删除指定元素的属性，其语法结构如下:

element.removeAttribute(attrName);

在上述语法结构中，调用 removeAttribute() 方法的 element 表示指定的元素，传递的参数 attrName 则表示删除的属性名。

值得注意的是:

删除属性尽量使用 removeAttribute() 方法，而不是调用 setAttribute() 方法将指定属性的值设置为 null。

如果删除的属性不存在的话，不会引发任何异常。

我们可以通过以下示例代码，学习 removeAttribute() 方法的具体使用:

var btn = document.getElementById('btn');
btn.removeAttribute('class');

Element 对象提供了 hasAttribute() 方法用于判断是否含有指定的属性，其语法结构如下:

var result = element.hasAttribute(attrName);

在上述语法结构中，调用 hasAttribute() 方法的 element 表示指定的元素，传递的参数 attrName 则表示要判断的属性名。

而 result 则是 hasAttribute() 方法的返回值，是一个 Boolean 类型的值。如果结果为 true，则表示含有指定的属性；如果结果为 false，则表示不含有指定的属性。

我们可以通过以下示例代码，学习 hasAttribute() 方法的具体使用:

var btn = document.getElementById('btn');
var result = btn.hasAttribute('class');
console.log(result);

Element 对象提供了与 hasAttribute() 方法相似的 hasAttributes() 方法用于判断是否含有属性，其语法结构如下:

var result = element.hasAttributes();

在上述语法结构中，调用 hasAttribute() 方法的 element 表示指定的元素，result 则是 hasAttributes() 方法的返回值，是一个 Boolean 类型的值。

值得注意的是: 该方法在某些浏览器中，已被废弃。

我们可以通过以下示例代码，学习 hasAttributes() 方法的具体使用:

var btn = document.getElementById('btn');
var result = btn.hasAttributes();
console.log(result);

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

图片描述