浅谈js中的attributes和Attribute的用法与区别

下面是关于“浅谈js中的attributes和Attribute的用法与区别”的完整攻略。

什么是attributes和Attribute

在JavaScript中，元素属性分为attributes和Attribute两种。

• attributes是DOM节点自带的特征，包括style、class、id等；
• Attribute是应用操作属性值的一个接口，包括getAttribute、setAttribute和removeAttribute三个方法。

Attributes和Attribute的区别

Attributes和Attribute的最大区别，在于前者返回的不一定是直接写在标签内的值。比如，如果一个input标签没有设置value属性的话，那么直接通过元素节点的value属性来访问这个标签的值一定为空字符串。而直接从attributes中获取value属性，会获得一个包含了input的value和defaultValue两个属性并存的NamedNodeMap集合。

<input id="input1" type="text">
<script>
console.log(document.getElementById("input1").value); // ""
console.log(document.getElementById("input1").attributes["value"].value); // "undefined"
</script>

从上面的例子可以看出，getAttribute方法返回的是属性值的字符串，而attributes对象存储了属性Map列表。

Attributes和Attribute的用法

getAttribute

getAttribute(属性名)方法用于获取指定属性名的属性值。如果指定属性不存在，则返回null。

例如，通过以下代码获取input标签的value属性值：

<input id="exampleInput" type="text" value="www.baidu.com">
<script>
console.log(document.getElementById("exampleInput").getAttribute("value")); // "www.baidu.com"
</script>

setAttribute

setAttribute(属性名, 值)方法用于设置指定属性名和属性值。如果指定属性名不存在，则新建该属性。如果已存在，修改该属性值为新值。

例如，通过以下代码设置input标签的value属性值为“www.jiuai.com”：

<input id="exampleInput" type="text">
<script>
document.getElementById("exampleInput").setAttribute("value", "www.jiuai.com");
console.log(document.getElementById("exampleInput").value); // "www.jiuai.com"
</script>

removeAttribute

removeAttribute(属性名)方法用于移除指定属性。该方法不会抛出错误即使指定的属性不存在。

例如，通过以下代码移除input标签的value属性：

<input id="exampleInput" type="text" value="www.baidu.com">
<script>
document.getElementById("exampleInput").removeAttribute("value");
console.log(document.getElementById("exampleInput").getAttribute("value")); // null
</script>

小结

以上就是“浅谈js中的attributes和Attribute的用法与区别”的攻略。其中，attributes是DOM节点自带的特征，Attribute是应用操作属性值的一个接口。getAttribute方法用于获取指定属性名的属性值；setAttribute方法用于设置指定属性名和属性值；removeAttribute方法用于移除指定属性。