HTML | DOM setNamedItem() 方法(1)

📌 相关文章

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

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

HTML | DOM setNamedItem() 方法

HTML | DOM setNamedItem() 方法用于向 NamedNodeMap 对象中添加指定的节点或属性，如果该名称已存在，则替换该节点或属性。

语法

namednodemap.setNamedItem(node)

参数

node : 需要添加或替换的节点或属性。

返回值

如果添加成功，则返回被添加或替换的节点或属性。如果失败，则返回 null。

实例

<!DOCTYPE html>
<html>

<head>
  <title>setNamedItem() 方法示例</title>
</head>

<body>

  <button onclick="addOrReplace()">添加或替换</button>
  <button onclick="remove()">删除</button>

  <p id="nameList"></p>

  <script>
    function addOrReplace() {
      var nameList = document.getElementById("nameList");
      var person = document.createElement("p");
      person.innerHTML = "李四";
      var node = nameList.childNodes[0];

      if (node == undefined) {
        node = document.createAttribute("name");
        node.value = "张三";
        nameList.attributes.setNamedItem(node);
      } else {
        nameList.replaceChild(person, node);
      }
    }

    function remove() {
      var nameList = document.getElementById("nameList");
      var node = nameList.getAttributeNode("name");
      nameList.attributes.removeNamedItem("name");
    }
  </script>

</body>

</html>

解释

以上实例演示了如何使用 setNamedItem() 方法来添加或替换 NamedNodeMap 对象中的节点。

当点击“添加或替换”按钮时，会检查 NamedNodeMap 对象中是否已存在名称为“name”的节点或属性。
如果不存在，则创建一个使用“name”作为名称的属性，然后使用 setNamedItem() 方法把它添加到 NamedNodeMap 对象中。
如果存在，则创建一个新的 <p> 节点，使用 replaceChild() 方法替换原有节点。

当点击“删除”按钮时，使用 removeNamedItem() 方法删除 NamedNodeMap 中的节点或属性。