HTML | DOM getAttributeNode() 方法(1)

📌 相关文章

📜 HTML | DOM getAttributeNode() 方法(1)

📅 最后修改于: 2023-12-03 14:41:47.744000 🧑 作者: Mango

HTML | DOM getAttributeNode() 方法

getAttributeNode() 方法用于获取指定元素的指定属性节点。该方法返回的是一个属性节点对象，包含属性名称和属性值两个属性。

语法

element.getAttributeNode(attributeName)

参数说明：

attributeName：必须，要获取的属性节点名称。

返回值：返回一个属性节点。

示例

<!DOCTYPE html>
<html>
<body>

<p id="myP">点击下面的按钮获取属性节点。</p>

<button onclick="getAttribute()">获取属性节点</button>

<script>
function getAttribute() {
  var p = document.getElementById("myP");
  var attr = p.getAttributeNode("id");
  alert(attr.nodeName + " = " + attr.nodeValue);
}
</script>

</body>
</html>

解释：上面的示例中，我们在一个 p 标签中设置了 id 属性，并为其赋值为 myP。在点击按钮时，调用 getAttribute() 方法来获取该元素的 id 属性节点。我们获取到的属性节点是一个对象，包含 nodeName 和 nodeValue 两个属性，它们分别显示属性名称和属性值。

属性节点

属性节点是指一个包含属性名称和属性值的节点，它可以作为 DOM 中一个元素节点中的某个属性。属性节点是可以修改的，也可以删除。

如何创建属性节点

我们可以使用 document.createAttribute() 方法来创建一个属性节点。例如：

var attr = document.createAttribute("class");
attr.value = "big";
element.setAttributeNode(attr); // 将属性节点添加到 element 元素中

上面的代码使用 document.createAttribute() 方法创建一个名为 class 的属性节点，并为其赋值为 big，然后将该属性节点添加到 element 元素中。

如何删除属性节点

我们可以使用 removeAttributeNode() 方法来删除一个属性节点。

var attr = element.getAttributeNode("class");
element.removeAttributeNode(attr);

上面的代码中，我们首先通过 getAttributeNode() 方法获取到 class 属性节点，然后使用 removeAttributeNode() 方法将该属性节点从元素上删除。