DOM复习

最新推荐文章于 2022-03-11 08:59:15 发布

「已注销」

最新推荐文章于 2022-03-11 08:59:15 发布

阅读量219

点赞数

分类专栏：前端文章标签： dom

前端专栏收录该内容

15 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM复习</title>
<style type="text/css">
   ul{float:left; margin:10px;}
</style>
</head>

<body>
<ul id="left">
   <li>左一</li>
    <li>左二</li>
    <li>左三</li>
    <li>左四</li>
    <li>左五</li>
    <li>左六</li>
</ul>
<ul id="center">
   <li>中一</li>
    <li>中二</li>
    <li>中三</li>
    <li>中四</li>
    <li>中五</li>
    <li>中六</li>
</ul>
<ul id="right">
   <li>右一</li>
    <li>右二</li>
    <li>右三</li>
    <li>右四</li>
    <li>右五</li>
    <li>右六</li>
</ul>

<script>
//cloneNode,ele.cloneNode(true);加个参数true，表示深度克隆
//removeCihld //由父元素来执行
//replaceChild //替换元素

var left=document.getElementById('left');
var leftLis=left.getElementsByTagName('li');
var right=document.getElementById('right');
var rightLis=right.getElementsByTagName('li');

/*for(var i=0; i<leftLis.length; i++){
   leftLis[i].index=i;
   leftLis[i].onclick=function(){
       //right.replaceChild(this,rightLis[this.index]); 替换并删除
       right.replaceChild(this.cloneNode(true),rightLis[this.index]);//替换不删除
   }
}
*/

/**********点击左边，将点击li移动到右边，点击右边li，将点击li移动到左边，点中间，把当前点击这个删掉****/
document.onclick=function(e){
   //有一种机制叫传播
   e=e||window.event;
   var t=e.target||e.srcElement;//出发当前这个onclick事件的源头是哪
   if(t.tagName=='LI'&&t.parentNode.id=='left'){
       right.appendChild(t);
   }else if(t.tagName=='LI'&&t.parentNode.id=='center'){
       t.parentNode.removeChild(t);
   }else if(t.tagName=='LI'&&t.parentNode.id=='right'){
       left.appendChild(t);
   }
}
</script>
</body>
</html>