JS替换HTML中现有元素，并将所有属性重新设置给新元素

场景

例子：给了我们一个单选按钮来选择某个dom元素的类型。

那么这时候，我们可以选择把所有的元素都写出来，然后根据单选的value去进行判断，展示哪一个元素。但是同样，我们也可以根据value的值，进行dom元素的替换，当单选切换不是很频繁时，这种方式的性价比可能会更高（个人想法，如有错误，欢迎纠正）

解决思路

首先获取到需要替换的元素，并且创建新的元素，将旧dom中的属性全部转移给新的dom后，在将其替换。

代码

此处以元素id为例子，要替换特定id的dom元素

replaceDom(domsIds, createTag){ // domsId：需要替换的元素的ID数组,createTag:要创建的元素的标签
	let doms = domIds.map((domId) => {
		return document.getElementById(domId)
	})
	doms.forEach((dom) => {
		// 获取dom元素的所有属性，返回的是NamedNodeMap类型
		let attrs = dom.attributes
		let newDom = document.createElement(createTag)
		for(let index = 0;index<attrs.length;index++){
			// 获取元素的属性key
			let nodeName = attrs[index].nodeName
			// 获取旧元素属性并赋值给新元素
			newDom.setAttribute(nodeName, dom.getAttribute(nodeName))
			//该方法也可以实现
			// newDom.setAttribute(attrs[index].name,attrs[index].value)
		}
		// 元素替换
		dom.parentNode.replaceChild(newDom,dom)
	})
}
		

补充（关于NamedNodeMap）

NamedNodeMap的属性及方法

列表的属性/方法：

属性/方法	描述
nodemap.length	节点列表中的节点数量。
nodemap.getNamedItem(nodeName)	从节点列表中返回的指定属性节点。
nodemap.item(index)	从节点列表中获取指定下标的节点。
nodemap.removeNamedItem(nodeName)	在节点列表中删除指定节点名的节点
nodemap.setNamedItem(node)	在节点列表中添加节点，如果节点名已存在，则进行替换

节点的属性/方法：

属性/方法	描述
node.isId	节点是否为ID节点，如果是返回true，否则返回false
node.name	返回节点的nodeName
node.value	设置或返回节点的value
node.specified	如果属性被指定返回 true ，否则返回 false