JS案例 节点交换位置 swapNode兼容各浏览器

实现两个节点交换位置效果，发现IE特有的swapNode函数可以直接交换，但不适用于其他浏览器

IE中 a.swapNode(b) ， 其他则需自定义 swapNode(a,b)

此时需要考虑如何兼容，首先需要判断用户使用何种浏览器，以便调用对应函数

JS中Browser对象中 navigator(导航器)的userAgent(用户代理)包含浏览器相关信息

navigator.userAgent.indexOf("MSIE")<=0 

HTML代码

<input type="button" value="添加图片" onClick="addNode()">
<input type="button" value="复制图片" onClick="copyNode()">
<input type="button" value="删除图片" onClick="delNode()">
<input type="button" value="交换位置" onClick="swap()">
<hr>
<img src="01.png" id="img1">
<img src="02.png" id="img2">

JS代码

//自定义函数 ID获取元素 
function $(id){
	return document.getElementById(id);
}

//添加一张图
function addNode(){
	var obj = document.createElement("img");
	obj.setAttribute("src", "01.png");
	//document.body.insertBefore(obj,$("img1"));//在img元素前插入新节点
	//通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。
	document.body.appendChild(obj);
}

//复制图片
function copyNode(){
	var img1 = $("img1");
	var img2 = img1.cloneNode(false);//复制节点 false 说明不克隆其含有的子元素
	document.body.appendChild(img2);
}

//删除图片
function delNode(){
	var imgs = document.getElementsByTagName("img");
	//移除节点时通过要移除的父节点的子节点来操作
	document.body.removeChild(imgs[imgs.length - 1]);
}

//图片
function swap(){
	var img1 = $("img1");
	var img2 = $("img2");
	
	//如果IE浏览器 特有 两个节点对象交换位置 a.swapNode(b) ， firefox中则需自定义 swapNode(a,b)
	//img1.swapNode(img2); 
	
	//navigator 导航器  包含有关浏览器的信息	-> Browser对象中之一 
	//userAgent (用户代理)属性是一个读的字符串，声明了浏览器用于 HTTP 请求的 用户代理 头的值
	if(navigator.userAgent.indexOf("MSIE")<=0){ //判断是否是IE以外的浏览器
		swapNode(img1,img2);
	}else{
		img1.swapNode(img2); //IE浏览器 特有 两个节点对象交换位置
	}

}

//节点交互的兼容处理 适应其他浏览器
function swapNode(node1,node2){
	var parent = node1.parentNode;//父节点
	//两节点的相对位置			nextSibling	（包括文本节点、注释节点即回车、换行、空格、文本等等）-> nextElementSibling
	var t1 = node1.nextSibling;//返回当前元素之后紧跟的兄弟节点对象（处于同一树层级中）   无节点则返回 null.
	var t2 = node2.nextSibling;
	
	//判断该元素是否拥有兄弟节点
	if(t1) {
		parent.insertBefore(node2,t1);// 在t1节点之前插入node2节点
	}else {
		parent.appendChild(node2);// //如果是插入到最后就用appendChild 子节点列表的末尾添加新的子节点
	}
	if(t2){
		parent.insertBefore(node1,t2);
	}else {
		parent.appendChild(node1);
	}
}

以火狐为例 点击按钮交换位置 效果图如下

运行前

运行后