為什么“ var x=document.getElementsByTagName("li")[2];”從第三個(gè)開始檢索已經(jīng)是最后一個(gè)？怎么是實(shí)現(xiàn)"nextSibling：li=css3"？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">??
??????????? <li id="a">javascript</li>??
??????????? <li id="b">jquery</li>??
??????????? <li id="c">html</li>??
??????? </ul>??
??????? <ul id="u2">??
??????????? <li id="d">css3</li>??
??????????? <li id="e">php</li>??
??????????? <li id="f">java</li>??
??????? </ul>??
<script type="text/javascript">
??? function get_nextSibling(n){
??????? var x=n.nextSibling;
??????? while (x && x.nodeType!=1){
??????????? x=x.nextSibling;
??????? }
??????? return x;
??? }
??? var x=document.getElementsByTagName("li")[2];
??? document.write(x.nodeName);
??? document.write(" = ");
??? document.write(x.innerHTML);
???
??? var y=get_nextSibling(x);
???
??? if(y!=null){
??????? document.write("<br />nextsibling: ");
??????? document.write(y.nodeName);
??????? document.write(" = ");
??????? document.write(y.innerHTML);
??? }else{
????? document.write("<br>已經(jīng)是最后一個(gè)節(jié)點(diǎn)");?????
??? }
?function get_previousSibling(n)
?{
??var a=n.previousSibling;
??while(a && a.nodeType!=1)
??{
???a=a.previousSibling;?
??}?
?return a;
?}
?var b=document.getElementsByTagName("li")[3];
?document.write(b.nodeName);
?document.write("=");
?document.write(b.innerHTML);
?
?var c=get_previousSibling(b);
?if(c!=null)
?{
??document.write(c.nodeName);
??document.write("=");
??document.write(c.innerHTML);
??
?}else{
???document.write("已經(jīng)是第一個(gè)了！");
??}
</script>
</body>
</html>
2016-09-19
樓上的方法可行，但是要告訴你，為啥第三個(gè)元素就是最后一個(gè)了的原因
首先
var x=document.getElementsByTagName("li")[2];
句話是獲取整個(gè)html內(nèi)容中的li元素集合，第一個(gè)ul有3個(gè)，第二個(gè)ul有3個(gè)，總共6個(gè)
nextSibling
nextSibling 屬性返回指定節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)，在相同的樹層級中。
意思是要是兄弟元素。所以這里的x就是第一ul中的最后一個(gè)li，他的后面沒有兄弟姐妹了，所以用nexSibling就是最后一個(gè)
2016-09-19
將<ul id="u2"> ?</ul>這兩行去掉，成為新的排列
? ? ? <ul id="u1">???
??????????? <li id="a">javascript</li>???
??????????? <li id="b">jquery</li>???
??????????? <li id="c">html</li>???
??????????? <li id="d">css3</li>???
??????????? <li id="e">php</li>???
??????????? <li id="f">java</li>???
??????? </ul>???