                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

訪問兄弟節點？

<!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>已經是最后一個節點");???? ?
??? }

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

這節我好像看不懂，，哪位同學給我解釋解釋啊。。。。

luona

2016-05-08

源自：JavaScript進階篇 9-11

關注問題我要回答

842

操作

收起

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);

這句調用get_nextSibling方法，進入get_nextSibling方法后，會隱式執行

var?n?=?x；

所以，這邊n是什么值，取決于調用方法時傳遞的參數是什么值。

0 回復有任何疑惑可以回復我~

收起回答

范克里夫
2016-05-09

//?得到下一個兄弟元素節點
function?get_nextSibling(n){
????//?x為n的下一個兄弟節點
????var?x=n.nextSibling;
????//?x為null時轉為布爾類型為false(注一)，元素節點的nodeType為1(注二)
????//?整個條件等價于x是一個節點，且x不是元素節點
????while?(x?&&?x.nodeType!=1){
????????//?因為想要的是元素節點，所以找下一個節點看是不是元素節點。while循環執行一次循環體，判斷一次條件
????????x=x.nextSibling;
????}
????//?這邊返回的x是元素節點或者null
????return?x;
}

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

注二：9-7節點屬性內容
元素類型????節點類型
??元素??????????1
??屬性??????????2
??文本??????????3
??注釋??????????8
??文檔??????????9