js的nextSibling和previousSibling兄弟节点 nextSibling：取得上一个兄弟节点
日期：2014-05-16 浏览次数：20447 次
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>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
