在 Web 前端开发中，我们经常需要操作 DOM 元素来实现各种功能。DOM（Document Object Model）是 HTML、XML 和 SVG 文档的编程接口，它提供了一种将文档表示为树结构的方式，使开发者可以轻松地操作文档中的各个元素。
在 DOM 中，有一个非常有用的方法叫做 setNamedItem()。这个方法用于向一个 NamedNodeMap 对象中添加一个新的属性节点，如果已经存在同名的属性节点，则会替换原有的属性节点。
语法
----------------------------------
namedNodeMap：表示一个包含属性节点的 NamedNodeMap 对象。newAttr：要添加或替换的属性节点。
参数
newAttr：要添加或替换的属性节点。必须是一个 Attr 对象。
返回值
如果操作成功，则返回被添加或替换的属性节点。如果操作失败，则返回 null。
示例
假设我们有一个 <div> 元素，我们想要向它添加一个 id 属性。我们可以使用 setNamedItem() 方法来实现：
--------- -----
------
------
--------------------- ------------
-------
------
---- -----------------------
--------
--- --- - ---------------------------------
--- ---- - -------------------------------
---------- - --------
----------------------------------
------------------------------------ -- --------
---------
-------
-------在这个示例中，我们首先通过 document.getElementById() 方法获取了 <div> 元素，然后使用 document.createAttribute() 方法创建了一个新的属性节点，并设置了其值为 newId。最后，我们调用了 setNamedItem() 方法将这个属性节点添加到了 <div> 元素中，并通过 getAttribute() 方法验证了属性是否成功添加。
注意事项
- 如果 NamedNodeMap 中已经存在同名的属性节点，则调用
setNamedItem()方法会替换原有的属性节点。 - 如果要添加的属性节点已经存在于 NamedNodeMap 中，则会返回原有的属性节点。
- 如果要添加的属性节点为 null 或 undefined，则会抛出一个 TypeError 异常。
通过学习和掌握 setNamedItem() 方法，我们可以更加灵活地操作 DOM 元素，实现各种动态效果和交互功能。希望本文对你有所帮助！