javascript - 如何交换两个 DOM 对象？

Question

比如这样的 DOM 结构：

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

我之前想的是这样交换：

var ps = document.querySelectorAll("p");
var temp;

temp = ps[0];
ps[0] = ps[1];
ps[1] = temp;

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

Answer 1

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

Answer 2

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

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

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

var psArray = Array.prototype.slice.call(ps,0);

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

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