为了账号安全,请及时绑定邮箱和手机立即绑定

访问兄弟节点的问题

570a60b10001d8e305000308.jpg

570a60b10001bf5d05000291.jpg

上面两个截图在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>


正在回答

4 回答

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 回复 有任何疑惑可以回复我~
#1

不知所语 提问者

你上面说的符合while条件,进入循环,此时循环中的x=x.nextSibling;已经是null,那么这个时候应该执行的是返回x的值,即返回null 不就会输出吗 我知道你的意思是说文本节点后是没有节点的,但是现在不是在判断最后一个li节点的兄弟节点吗,
2016-04-11 回复 有任何疑惑可以回复我~
#2

任大人 回复 不知所语 提问者

循环体中的x=x.nextSibling为null的情况下,怎么会跳过循环执行return x ?,当不符合while条件,且while条件没有错的情况下才会跳出循环。执行return x; while条件中写x&&x.nodeType!=1;当循环体重的结果为null的时候,x&&x.nodeType!=1,&&前面的x不为真,直接跳出循环,都不判断x.nodeType!=1。但是while条件中只有x.nodeType!=1的时候,是错误的,程序到这里就不执行了,你试着alert(null.nodeType),什么内容都不弹。
2016-04-11 回复 有任何疑惑可以回复我~
#3

不知所语 提问者 回复 任大人

我现在明白你的意思,我也知道自己哪错了,但是还要问一个问题,节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,这句话是之前一节练习上讲到的对吧,那就是说最后一个li标签后面还有一个文本节点,即便是这个节点的内容返回值是null,但是它的nodeTyoe不为1吧,那为什么按照我的这个思想不成立呢,不知道是哪想错了还是,求解
2016-04-11 回复 有任何疑惑可以回复我~
#4

不知所语 提问者 回复 任大人

null是没有nodeType的,但是既然空白符是文本节点,那就应该有nodeType啊,我觉得自相矛盾
2016-04-11 回复 有任何疑惑可以回复我~
#5

任大人 回复 不知所语 提问者

1.最后一个li标签后面还有一个文本节点,不是这个节点的内容返回值是null,而是这个空白符没有nextSibling属性,因为已经是最后一个li元素了。最后一个li元素之后的空白符没有下一个子节点,所以x.nextSibling得值为null,没有nodeTyoe属性。
2016-04-11 回复 有任何疑惑可以回复我~
#6

任大人 回复 不知所语 提问者

2.我给你将这个while的过程走一遍,你应该理解了while (x&&x.nodeType!=1)是不能省略x && 的。 还是按照你的代码走,这里找的是最后一个li元素<li id="c">html</li>,也就是var x=document.getElementsByTagName("li")[2];
2016-04-11 回复 有任何疑惑可以回复我~
#7

不知所语 提问者

非常感谢!
2016-04-11 回复 有任何疑惑可以回复我~
查看4条回复
  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 回复 有任何疑惑可以回复我~
#1

不知所语 提问者 回复 任大人

ydyrx__214
2016-04-11 回复 有任何疑惑可以回复我~
#2

不知所语 提问者 回复 任大人

下面这个两条横线的
2016-04-11 回复 有任何疑惑可以回复我~
查看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 回复 有任何疑惑可以回复我~

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


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

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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468189    人
  • 解答问题       21891    个

本课程从如何插入JS代码开始,带您进入网页动态交互世界

进入课程

访问兄弟节点的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信