异常教程

HTML DOM setNamedItem() 方法（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，DOM（文档对象模型）是连接HTML、CSS和JavaScript的核心桥梁。它允许开发者通过代码动态操作网页元素的结构、样式和内容。而 HTML DOM setNamedItem() 方法 是DOM操作中一个关键工具，尤其在处理节点列表时具有重要作用。本文将从基础概念出发，结合实际案例和代码示例，深入解析这一方法的原理与应用场景，帮助开发者掌握其核心用法。

一、基础概念解析

1.1 什么是Node List（节点列表）？

节点列表是DOM中的一种数据结构，用于存储一组同类型的节点（如元素节点、属性节点等）。例如，通过 document.querySelectorAll() 获取的元素集合就是一个节点列表。节点列表的行为类似数组，但并非真正的数组，因此不能直接使用数组方法。

形象比喻：
可以将节点列表想象成一个图书馆的书架，每个书架（节点列表）存放着同一类书籍（节点），而每本书的位置和顺序由系统管理。

1.2 NamedNodeMap与节点属性

NamedNodeMap 是DOM中一种特殊的节点列表，用于存储以名称（Name）或ID为键的节点集合。最常见的例子是元素的 属性集合（如element.attributes）和 样式集合（如element.style）。

关键区别：

  • NamedNodeMap 不是数组，而是以键值对形式存储的集合。
  • 其中的每个节点必须具有唯一的名称或ID，这类似于字典或哈希表的结构。

二、setNamedItem() 方法详解

2.1 方法语法与参数

语法：

nodeList.setNamedItem(node);

参数说明：

  • node：需要添加到节点列表中的节点对象。该节点必须是 Attr（属性节点）或 CSSStyleDeclaration（样式节点）类型，否则会抛出错误。

2.2 核心功能

setNamedItem() 的主要作用是：

  1. 添加新节点：如果节点列表中不存在同名的节点，则直接添加。
  2. 替换已有节点：如果存在同名节点，则替换旧节点并返回被替换的节点。

操作流程：

  • 检查节点列表中是否存在与传入节点名称相同的现有节点。
  • 如果存在，则用新节点替换旧节点，并返回旧节点。
  • 如果不存在，则将新节点添加到列表末尾，返回 null。

三、实际应用场景与代码示例

3.1 案例1：动态修改元素属性

假设我们需要通过JavaScript动态修改一个按钮的 class 属性：

<button id="myButton" class="original-class">点击我</button>

代码实现：

const button = document.getElementById("myButton");
const newClassAttr = document.createAttribute("class"); // 创建新属性节点
newClassAttr.value = "new-class"; // 设置属性值  

// 使用setNamedItem()替换原有class属性
const oldClassAttr = button.attributes.setNamedItem(newClassAttr);
console.log(oldClassAttr.value); // 输出："original-class"

关键点：

  • 通过 document.createAttribute() 创建属性节点。
  • 直接操作 element.attributes 这个 NamedNodeMap。
  • 替换属性后，旧节点被返回，可用于后续处理。

3.2 案例2：操作元素样式

element.style 也是一个 NamedNodeMap，可用于动态设置内联样式：

const div = document.querySelector("div");
const newStyle = document.createAttribute("style"); // 创建样式节点  
newStyle.value = "color: red; font-size: 20px;";  

// 通过setNamedItem()添加样式节点
div.style.setNamedItem(newStyle); // 注意：此写法可能不直接适用

注意事项：

  • element.style 的操作通常更简单，直接通过属性赋值即可： 
    div.style.color = "red";
  • setNamedItem() 在样式操作中较少使用，但了解其底层逻辑有助于理解DOM机制。

3.3 案例3：处理表单数据

在表单提交前，动态添加或修改输入字段的属性：

<form id="myForm">
  <input type="text" name="username" value="初始值">
</form>

代码实现：

const form = document.getElementById("myForm");
const inputNode = form.querySelector("input");  

// 创建新属性节点并设置默认值  
const defaultValueAttr = document.createAttribute("data-default");  
defaultValueAttr.value = inputNode.value;  

// 将新属性添加到input的属性列表中  
inputNode.attributes.setNamedItem(defaultValueAttr);  

// 后续可通过inputNode.attributes.getNamedItem("data-default")获取该属性

四、进阶技巧与注意事项

4.1 参数类型验证

setNamedItem() 要求传入的节点必须是 Attr 或 CSSStyleDeclaration 类型。若传入其他类型（如元素节点），会抛出错误：

const invalidNode = document.createElement("div"); // 元素节点  
try {
  element.attributes.setNamedItem(invalidNode); // 抛出TypeError  
} catch (e) {
  console.error("节点类型不支持！");  
}

4.2 替换与添加的逻辑差异

  • 替换场景：当节点列表中存在同名节点时，新节点会覆盖旧节点。例如：

    const attr1 = document.createAttribute("class");  
const attr2 = document.createAttribute("class");  
element.attributes.setNamedItem(attr1); // 添加  
element.attributes.setNamedItem(attr2); // 替换attr1

  • 添加场景：若名称唯一，则直接追加。例如：

    const attr3 = document.createAttribute("data-new");  
element.attributes.setNamedItem(attr3); // 添加成功

五、常见问题解答

5.1 为什么不能直接操作元素属性？

直接通过 element.setAttribute() 更简单，但 setNamedItem() 允许开发者更精细地操作节点对象本身。例如，可以先修改节点值再添加，或保留旧节点的引用：

const attr = document.createAttribute("title");  
attr.value = "新标题";  
const oldAttr = element.attributes.setNamedItem(attr);  
console.log(oldAttr); // 输出旧的title属性节点（如果存在）

5.2 如何遍历节点列表？

通过 for...of 循环或 Array.from() 转换为数组：

for (const attr of element.attributes) {
  console.log(attr.name, attr.value);  
}

5.3 与setNamedItemNS()的区别

setNamedItemNS() 是 setNamedItem() 的扩展版本，支持处理带有命名空间（如XML）的节点。普通网页开发中，通常无需使用此方法。

六、结论

HTML DOM setNamedItem() 方法 是DOM操作中一个高效且灵活的工具，尤其在动态管理属性和样式时表现出色。通过理解 NamedNodeMap 的工作原理和方法的替换机制，开发者可以更精准地控制网页元素的属性与行为。

掌握这一方法不仅能提升代码的可维护性，还能为处理复杂DOM操作（如表单动态验证、响应式布局调整）奠定基础。建议读者通过实际项目不断实践，逐步深入掌握DOM操作的精髓。

最新发布

查看更多文章