日期:2014-05-16  浏览次数:20471 次

js的nextSibling和previousSibling兄弟节点 nextSibling:取得下一个兄弟节点;
<!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>  

?