您的位置：首页 > 其它

DOM复习

2016-01-06 11:07 232 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航