访问兄弟节点的问题

源自：9-11 访问兄弟节点

访问兄弟节点的问题

上面两个截图在while语句中的条件我已经圈出来了，为什么两个运行的结果一个可以显示“已经是最后一个节点”，另一个却没有执行到这一步

!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){
            alert(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>已经是最后一个节点");      
    }

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

提问者：不知所语 2016-04-10 22:22

个回答

任大人

2016-04-11 10:10:21

已采纳

22行的结果为null， var x=document.getElementsByTagName("li")[2];的下一个节点在火狐中是空白符属于文本节点，符合while条件，会进入循环，循环中x=x.nextSibling; 此时x.nextSibling已近为null，如果while中加上x && ，判断x为真才执行，此时为null，所以不执行，跳出循环执行return x; 如果你while条件不判断x是否为真，只有x.nodeType!=1的话，此时的while循环已经出错了，因为null没有nodeType属性，下面的return x ;都不执行。var y=get_nextSibling(x);函数连返回值都没有。什么都不输出。

0
任大人

2016-04-11 16:01:05
1. 最后一个li标签后面还有一个文本节点,不是这个节点的内容返回值是null，而是这个空白符没有nextSibling属性，因为已经是最后一个 li元素了。最后一个li元素之后的空白符没有下一个子节点，所以x.nextSibling得值为null，没有nodeTyoe属性。
2. 我给你将这个while的过程走一遍，你应该理解了while (x&&x.nodeType!=1)是不能省略x && 的。
  还是按照你的代码走，这里找的是最后一个li元素<li id="c">html</li>，也就是var x=document.getElementsByTagName("li")[2];
3. 接下来进入循环：
  var y=get_nextSibling(x);//将最后一个li元素x作为参数传入函数get_nextSibling()
  function get_nextSibling(n){
          var x=n.nextSibling;//假设在火狐浏览器，这里的nextSibling为空白符，属于文本节点，nodeType=3
          while (x&&x.nodeType!=1){ //文本节点有nodeType属性，所以while(x)为真，3！=1也成立，继续执行
              x=x.nextSibling;//空白符之后没有li元素了，所以x.nextSibling=null,将x=null继续传入while条件中作判断，其中while(x)就不满足，null相当于!x,所以不在执行循环体中的代码，x=null就是此次循环的结果。如果你这里while中只写 while(x.nodeType!=1),就出错了，null没有这个属性。出错之后下面的rerun x将不在执行。所以你页面中什么都不输出
          }
          return x;//相当于return null，所以页面会输出 ‘已经是最后一个节点’
      }
0
任大人

2016-04-11 15:59:36

回复不知所语：接下来进入循环：
var y=get_nextSibling(x);//将最后一个li元素x作为参数传入函数get_nextSibling()
function get_nextSibling(n){
        var x=n.nextSibling;//假设在火狐浏览器，这里的nextSibling为空白符，属于文本节点，nodeType=3
        while (x&&x.nodeType!=1){ //文本节点有nodeType属性，所以while(x)为真，3！=1也成立，继续执行
            x=x.nextSibling;//空白符之后没有li元素了，所以x.nextSibling=null,将x=null继续传入while条件中作判断，其中while(x)就不满足，null相当于!x,所以不在执行循环体中的代码，x=null就是此次循环的结果。如果你这里while中只写while(x.nodeType!=1),就出错了，null没有这个属性。出错之后下面的rerun x将不在执行。所以你页面中什么都不输出
        }
        return x;//相当于return null，所以页面会输出 ‘已经是最后一个节点’
    }

0
不知所语

2016-04-11 11:03:33

你上面说的符合while条件，进入循环，此时循环中的x=x.nextSibling;已经是null，那么这个时候应该执行的是返回x的值，即返回null 不就会输出吗

我知道你的意思是说文本节点后是没有节点的，但是现在不是在判断最后一个li节点的兄弟节点吗，

0