同样是前几天阿里电话面的一道简单的DOM操作题,
但是由于自己DOM操作掌握的不熟练,答的很烂.....这里总结一下
首先这里用到了一个API,Node.insertBefore(a,b)
在b节点之前插入a
在这之前首先要获取这两个元素的父亲节点
<div>
<div id="list1">list1</div>
<div id="list2">list2</div>
<div id="list5">list5</div>
<div id="list6">list6</div>
</div>
<style>
#list1{
background:red;
}
#list2{
background:orange;
}
#list5{
background:green;
}
#list6{
background:pink;
}
</style>
假设要交换第一个和第五个元素
首先逻辑是先新建一个节点(标记节点),然后把这个节点插在第二个目标节点前面,相当于记下一个位置,然后把第二个目标节点插到第一个目标节点前面,再把第一个目标节点插在标记节点的后面,结束。
JS代码:
function exchange(id_1,id_2){
var newNode = document.createElement('div')
list1.parentNode.insertBefore(newNode,id_2)
list1.parentNode.insertBefore(id_2,id_1)
list1.parentNode.insertBefore(id_1,newNode)
list1.parentNode.removeChild(newNode)
}
exchange(list2,list6)
list2.png