📌  相关文章
📜  HTML | DOM setAttributeNode() 方法(1)

📅  最后修改于: 2023-12-03 15:01:12.138000             🧑  作者: Mango

HTML | DOM setAttributeNode() 方法

setAttributeNode() 方法用于设置指定节点的指定属性节点。如果属性已经存在，则仅更新该值。否则，该属性将被添加到节点上。

语法:

element.setAttributeNode(attributenode)
  • attributenode: 必需，一个要设置的属性节点对象。

下面是使用 setAttributeNode() 方法的示例代码:

<!DOCTYPE html>
<html>
<head>
<title>setAttributeNode 方法</title>
</head>
<body>

<button>添加属性</button>

<p id="demo">示例段落文本</p>

<script>
// 用 document.createAttribute() 方法创建一个属性节点
var att = document.createAttribute("class");
att.value = "example";

// 获取 <p> 元素
var para = document.getElementById("demo");

// 添加属性节点到 <p> 元素
para.setAttributeNode(att);

// 按钮点击事件
document.querySelector("button").onclick = function() {
  // 获取属性节点
  var att = para.getAttributeNode("class");

  // 更新属性的值
  att.value = "changevalue";

  // 属性值
  var text = "属性值: " + att.value;

  // 显示属性值
  alert(text);
};
</script>

</body>
</html>

以上代码将在页面上创建一个带有 class 属性的 <p> 元素，并在单击按钮时更新该属性的值并显示其新值。

方法解析
  • 首先，我们使用 document.createAttribute() 方法创建一个名为 class 的属性节点。
  • 然后，我们使用 getElementById() 方法获取带有 id="demo" 的 <p> 元素。
  • 接着，我们使用 setAttributeNode() 方法将新的属性节点添加到 <p> 元素中。
  • 最后，我们将单击事件绑定到页面中的按钮上，并在单击按钮时更新 class 属性的值并使用 getAttributeNode() 方法获取属性节点。
注意事项

使用 setAttributeNode() 方法添加属性时，请确保属性节点已经使用 createAttribute() 方法创建，否则会出现错误。

此外，还需要注意以下事项：

  • 在 DOM 中，所有 HTML 元素节点都是 HTMLElement 类型的实例。因此，setAttributeNode() 方法可用于所有 HTML 元素节点。

  • 在 HTML DOM 中，属性以名称和值的形式存储，并且可以通过属性名称访问和修改属性。

  • 如果属性已经存在，则在调用 setAttributeNode() 方法时，该属性的值将被更新。否则，将在元素中创建新属性。

支持的浏览器

所有主流浏览器都支持 setAttributeNode() 方法。

参考