js的nextSibling和previousSibling兄弟节点 nextSibling：取得下一个兄弟节点； -

lgtq1983

浏览: 101207 次
性别:
来自: 西安

最近访客更多访客>>

d17292

ABuFan

wb8206656

jk_zero

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js的nextSibling和previousSibling兄弟节点 nextSibling：取得下一个兄弟节点；

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Untitled Document</title>   
        <script language="JavaScript">   
            function test() {   
                var node = document.getElementById("li2");   
				alert(node.id+"---"+node.innerText);//li2---J2EE
                alert(node.nextSibling.id+"---"+node.nextSibling.innerText);   //Li3---Haha
                alert(node.previousSibling.id+"---"+node.previousSibling.innerText);  //li1---Magci 
                alert(node.nextSibling.previousSibling.id+"---"+node.nextSibling.previousSibling.innerText);  //li2---J2EE  
                alert(node.parentElement.id); --u1
            }  
			
			function test2() {
			   var node = document.getElementsByTagName("li");
			   for(var i=0;i<node.length;i++) {
			       if(node[i].nextSibling) {
				      alert(node[i].nextSibling.id);
				   }
			       
			   }
			}

			function test3() {
			   var node = document.getElementsByTagName("input");
			   for(var i=0;i<node.length;i++) {
			       if(node[i].type=="checkbox"){
				      alert(node[i].id);
					  alert(node[i+1].id);
				   }
			   }
			}


        </script>   
    </head>   
    <body>   
        <ul id="u1">   
            <li id="li1" class="li1">Magci</li>   
            <li id="li2">J2EE</li>   
            <li id="li3">Haha!</li>   
        </ul>   
        <ul id="u2">   
            <li id="li4" class="li1">Magci2</li>   
            <li id="li5">J2EE2</li>   
            <li id="li6">Haha2!</li>   
        </ul>   
		<ul id="u3">   
            <input type="checkbox" id="aa" value="Click Me!"  > aa  </input>
			<input type="checkbox" id="bb" value="J2EE2" >  bb </input>
			<input type="checkbox" id="cc" value="Haha2!" >  cc  </input> 
        </ul> 
        <input type="button" value="Click Me!" onClick="test();" />  
		<input type="button" value="Click Me!" onClick="test2();" />  
		<input type="button" value="Click Me!" onClick="test3();" />  
    </body>   
</html>

分享到：