如何獲得指定節點的后面所有節點
var x=document.getElementsByTagName("li");
這里 x.length 是 6?
將 if 改為 while 后，應該能夠獲取指定節點后的所有節點，但只能獲取 3 個，為啥呀?
? ? if (y!=null){
? ? ? ? document.write("<br />nextsibling: ");
? ? ? ? document.write(y.nodeName);
? ? ? ? document.write(" = ");
? ? ? ? document.write(y.innerHTML);
? ? ? ? y=get_nextSibling(y);? ??
完整代碼：
<!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);
? ??
? ? while(y!=null){
? ? ? ? document.write("<br />nextsibling: ");
? ? ? ? document.write(y.nodeName);
? ? ? ? document.write(" = ");
? ? ? ? document.write(y.innerHTML);
? ? ? ? y=get_nextSibling(y);
? ? }
? ? ? document.write("<br>已經是最后一個節點");? ? ??
</script>
</body>
</html>
2022-11-03
第一步：var x=document.getElementsByTagName("li")[0];? 得到第一個li.
第二步：var y=get_nextSibling(x);調用函數，
第三步：var x=n.nextSibling;? ? 此時節點變作文本節點，類型為3，進入while判斷
第四步：
while (x && x.nodeType!=1){
? ? ? ? ? ? x=x.nextSibling;
? ? ? ? }判斷后節點變作第二個li，類型為1.
第五步：返回第二個節點對象給y，進入while(y!=null)
第六步：與y此時是兄弟的節點只有 "空白文本"，"第三個li"，"空白文本"? ，一共三個兄弟節點，所以循環輸出三個節點。over
注意：nextSibling這是下一個兄弟節點的意思，不是下一個節點。
關于這個var x=document.getElementsByTagName("li");獲得是標簽為li的元素節點集合，和你問的第一個li的節點后續的兄弟節點是不同的，這里li集合里后面三個li和第一個li根本不是兄弟。