如何交换两个 DOM 对象？

Question

比如这样的 DOM 结构：

<div id="a1"></div>
<div id="a2"></div>

我之前想的是这样交换：

var divs = document.querySelectorAll("div");
var temp;

temp = divs[0];
divs[0] = divs[1];
divs[1] = temp;

但是我却发现，即使在执行 divs[0] = divs[1] 这条语句后，div[0] 依然是原来的那个对象，并没有将 div[1] 的对象赋值给 div[0]，请问这是为什么呢？如果要交换两个 DOM 对象，请问要怎么实现？

Answer 1

http://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript

Answer 2

因为divs是nodeList而不是array；而nodeList是只读的，反映的是文档节点的实时结构;

console.log(divs instanceof Array);; //false
console.log(divs instanceof NodeList);//true

要想把nodeList像数组一样操作，得先把divs转换为array；

var divsArray = Array.prototype.slice.call(divs,0);

然后，交换“位置”，注意，这只是交换两个节点对象在数组中的位置，而不是在DOM中的位置；

console.log("before:",divsArray);//[div#test, div#test2] 
var temp = divsArray[0];
divsArray[0] = divsArray[1];
divsArray[1] = temp;
console.log("after:",divsArray);//[div#test2, div#test]