                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

訪問兄弟節(jié)點(diǎn)？

<!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")[0];
??? 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)");???? ?
??? }

</script>
</body>
</html>

這節(jié)我好像看不懂，，哪位同學(xué)給我解釋解釋啊。。。。

luona

2016-05-08

源自：JavaScript進(jìn)階篇 9-11

關(guān)注問題我要回答

907

操作

收起

2 回答

范克里夫
2016-05-10

function?get_nextSibling(n){
????var?x=n.nextSibling;
????while?(x?&&?x.nodeType!=1){
????????x=x.nextSibling;
????}
????return?x;
}

可以這么理解：

var?y=get_nextSibling(x);

這句調(diào)用get_nextSibling方法，進(jìn)入get_nextSibling方法后，會(huì)隱式執(zhí)行

var?n?=?x；

所以，這邊n是什么值，取決于調(diào)用方法時(shí)傳遞的參數(shù)是什么值。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

范克里夫
2016-05-09

//?得到下一個(gè)兄弟元素節(jié)點(diǎn)
function?get_nextSibling(n){
????//?x為n的下一個(gè)兄弟節(jié)點(diǎn)
????var?x=n.nextSibling;
????//?x為null時(shí)轉(zhuǎn)為布爾類型為false(注一)，元素節(jié)點(diǎn)的nodeType為1(注二)
????//?整個(gè)條件等價(jià)于x是一個(gè)節(jié)點(diǎn)，且x不是元素節(jié)點(diǎn)
????while?(x?&&?x.nodeType!=1){
????????//?因?yàn)橄胍氖窃毓?jié)點(diǎn)，所以找下一個(gè)節(jié)點(diǎn)看是不是元素節(jié)點(diǎn)。while循環(huán)執(zhí)行一次循環(huán)體，判斷一次條件
????????x=x.nextSibling;
????}
????//?這邊返回的x是元素節(jié)點(diǎn)或者null
????return?x;
}

注一：9-7節(jié)點(diǎn)屬性內(nèi)容
1.?nextSibling?屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
語法：
nodeObject.nextSibling
說明：如果無此節(jié)點(diǎn)，則該屬性返回?null。

注二：9-7節(jié)點(diǎn)屬性內(nèi)容
元素類型????節(jié)點(diǎn)類型
??元素??????????1
??屬性??????????2
??文本??????????3
??注釋??????????8
??文檔??????????9

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

luona 提問者

function get_nextSibling(n) 這里面的n是什么??？？

2016-05-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

范克里夫回復(fù) luona 提問者

n只是一個(gè)形參，名字可以自己隨便定義（除了保留關(guān)鍵字），要看你在調(diào)用這個(gè)方法的時(shí)候傳的是什么參數(shù)。 var x=document.getElementsByTagName("li")[0]; var y=get_nextSibling(x); 在你的例子里，x指第一個(gè)li 對(duì)象

2016-05-09 回復(fù) 有任何疑惑可以回復(fù)我~

#3

luona 提問者回復(fù) 范克里夫

這節(jié)沒有仔細(xì)看，我感覺有點(diǎn)難

2016-05-10 回復(fù) 有任何疑惑可以回復(fù)我~