JavaScript DOM Attribute属性操作方法详解

作者：小圆点时间：2026-10-30 06:56:54浏览：375

本文详细介绍JavaScript中DOM元素的Attribute属性操作方法，包括获取、设置、创建和删除属性及属性节点。重点解析getAttribute、setAttribute、createAttribute等常用API的使用场景，并针对IE与Firefox在attributes对象访问方式上的兼容性差异提供解决方案，附带完整代码示例。

Attribute属性概述

Attribute意为属性，本文主要介绍在IE和Firefox浏览器中兼容的部分Attribute相关操作。

attributes：用于获取元素的所有属性，并将其作为一个对象返回。

getAttribute：用于获取指定属性名的属性值。

setAttribute：用于创建一个新属性，并直接为其赋值。

createAttribute：仅用于创建一个属性节点，不直接附加到元素上。

removeAttribute：用于删除指定名称的属性。

getAttributeNode：用于获取指定名称的属性节点对象。

setAttributeNode：用于将一个属性节点对象添加到元素中。

removeAttributeNode：用于从元素中删除指定的属性节点对象。

attributes属性可以获取元素中的一个属性，并作为对象进行调用。需要注意的是，访问时必须使用方括号“[]”，虽然在IE中可以使用圆括号“()”，但为了确保跨浏览器兼容性，建议统一使用“[]”。关于attributes属性在IE和Firefox中的具体行为差异，此处不再赘述。

attributes对象的使用

attributes属性的通用使用方法（适用于IE和Firefox）：


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//显示value aaa
</script>

getAttribute、setAttribute、createAttribute和removeAttribute这四个方法的概念相对直观，使用方式也较为简单。但在实际使用时需注意以下几点：

1、使用createAttribute时，无需基于特定DOM对象，直接通过document.createAttribute()即可创建。

2、在使用setAttribute和createAttribute时，应避免使用name、type、value等保留字作为属性名，否则在IE和Firefox中可能产生难以理解的异常行为。

3、使用createAttribute时，如果仅定义了属性名而未通过d.nodeValue = "hello"等语句定义值，Firefox会将其视为空字符串，而IE则视为undefined。需注意这一差异。

getAttribute的具体使用方法如下：

基础属性操作方法


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

setAttribute的具体使用方法如下：（执行后你会发现元素多了一个名为good且值为hello的属性）


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
</script>

createAttribute的具体使用方法如下：（执行后元素多了一个名为good的空属性节点）


<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function (){
        var oBox = document.getElementById('box');
        alert( document.body.innerHTML );
        oBox.setAttribute('value','name');
        alert( document.body.innerHTML );
        attr = document.createAttribute('hallo');
        alert( document.body.innerHTML );/*同上*/
        attr.nodeValue = 'world';/*对自定义属性进行编辑*/
        alert( document.body.innerHTML );/*同上*/
        oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
        alert( document.body.innerHTML );/*改变*/
      };
    </script>
  </head>
  <body>
    <ul id="box">
    </ul>
  </body>

removeAttribute的具体使用方法如下：（执行后指定属性被移除）


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

getAttributeNode、setAttributeNode和removeAttributeNode这三个方法的特点是直接操作属性节点（node）。初学者容易在使用removeAttributeNode时出错，但充分理解节点含义后，即可灵活应用。

getAttributeNode的具体使用方法如下：

属性节点操作方法


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>

setAttributeNode的具体使用方法如下：


<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);
</script>

removeAttributeNode的具体使用方法如下：


<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d); 
alert(document.getElementById("t").innerHTML);
</script>

更多关于attributes属性的疑问，可参考w3school官方文档查询。

以上关于JS Attribute属性操作的详解内容分享完毕，希望能为读者提供参考，也欢迎大家继续支持本站。

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09