JS操作DOM属性：getAttribute、setAttribute与attributes对象详解

Attribute方法系列概述

在JavaScript中，Attribute（方法系列）和attributes（对象集合）均用于操作元素的属性，但二者在实现机制和应用场景上存在显著差异。

Attribute系列方法主要包括：getAttribute用于获取指定属性的值；setAttribute用于创建新属性并赋值；createAttribute仅创建属性节点而不直接绑定到元素；removeAttribute用于删除指定属性。此外，还有getAttributeNode、setAttributeNode和removeAttributeNode三个方法，它们直接操作属性节点对象。

getAttribute与setAttribute详解

1. getAttribute方法详解：


<body>
 <div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d=document.getElementById("sss").getAttribute("value");
 console.log(d)  //aaa;
</script>

该方法返回的是属性的字符串值，而非节点对象本身。

2. setAttribute方法：


<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//多了一个属性为good;但是没有给其设置属性值；所以为空。
</script>


// obox.setAttribute("a","b") 返回值是undifined;表示给标签里面加上一个属性a;属性值
     // 为b;若设置的属性已经存在，那么仅限设置/更改值;直接设置 
     //给了标签,看不到返回值，但在html页面中可以看到属性已经被添加到了标签中。

3. createAttribute方法：


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;
       //多了一个属性,属性值为空
</script>

4. removeAttribute方法：


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.getElementById("sss").getAttributeNode("value")　　　　console.log(d)   // value="aaa"
 document.getElementById("sss").removeAttributeNode(d);
 alert(document.getElementById("t").innerHTML); //弹出框<input type = "hidden" id = "sss">;
       //在标签中删除属性value
</script>

createAttribute注意事项

getAttribute、setAttribute、createAttribute和removeAttribute这四个方法概念直观且使用简单，但需注意以下关键点： 1. createAttribute无需基于特定DOM对象，可直接通过document.createAttribute()调用。 2. 使用setAttribute和createAttribute时，应避免使用name、type、value等保留字作为属性名，以免引发意外行为。 3. 若使用createAttribute仅定义属性名而未通过node.nodeValue赋值，Firefox会将其视为空字符串，而IE则视为undefined，存在跨浏览器兼容性差异。

节点级操作方法

getAttributeNode、setAttributeNode和removeAttributeNode这三个方法的特点是直接操作属性节点（Node）对象，而非简单的字符串值。

示例代码展示：


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML); //弹出框<input type="hidden" id="sss" value="aaa" good="">;
</script>

setAttributeNode()方法用于添加新的属性节点。参数attributenode为必填项，指定要添加的属性节点对象。

若元素中已存在同名属性，新属性将替代旧属性，并返回被替代的属性节点；若未存在，则返回NULL。

======================================================================

attributes对象的使用

二、attributes对象的用法：

attributes属性返回一个包含元素所有属性节点的集合（伪数组）。可通过length属性确定属性数量，并遍历该集合提取所需信息。每个元素均为属性节点对象，可通过方括号“[]”索引访问特定属性。

注意，前缀为“attributes”的方法或属性均针对节点级别操作。

对象.attributes用于获取所有属性节点，返回一个伪数组结构。


<body>
 <div id = "t">
 <input type = "text" id = "sss" value = "aaa">
</body>
<script type="text/javascript">
 var a=document.getElementById("sss").attributes;
 console.log(a); //NamedNodeMap {0: type, 1: id, 2: value, type: type, id: id, value: value, length: 3}; 　　　　　　　　　　　　　　//attributes获得所有的属性节点,返回一个数组(伪数组);
 // attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”
 var d = document.getElementById("sss").attributes["value"];
 console.log(typeof d);  // object
 console.log(d);   // value="aaa";
 document.write(d.name);  //显示 value
 document.write(d.value);  //显示 aaa
</script>


<body>
 <div class="box" a="10" b="20" id="cont"></div>
</body>
<script>
 var obox=document.querySelector(".box");
 console.log(obox.attributes[3])  //id="cont";

 console.log(typeof obox.attributes[3]) //object;

 console.log(obox.attributes[3].nodeName); //id;显示数组中第四个属性的属性名

 console.log(obox.attributes[3].nodeValue); //cont;显示数组中第四个属性的属性值

 console.log(obox.attributes[3].nodeType); //2; 元素节点属性的返回值为2

</script>

至此，关于JavaScript中attributes与Attribute的用法及区别介绍完毕。如需了解更多相关内容，请查阅本站过往文章或继续浏览后续教程，感谢支持！

JavaScript中getAttribute与attributes的区别及用法详解

Attribute方法系列概述

getAttribute与setAttribute详解

createAttribute注意事项

节点级操作方法

attributes对象的使用

实用工具推荐