访问兄弟节点的问题
不知所语
2016-04-10 22:22
上面两个截图在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回答
-
- 任大人
- 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);函数连返回值都没有。什么都不输出。
-
- 任大人
- 2016-04-11 16:01:05
最后一个li标签后面还有一个文本节点,不是这个节点的内容返回值是null，而是这个空白符没有nextSibling属性，因为已经是最后一个 li元素了。最后一个li元素之后的空白符没有下一个子节点，所以x.nextSibling得值为null，没有nodeTyoe属性。
我给你将这个while的过程走一遍，你应该理解了while (x&&x.nodeType!=1)是不能省略x && 的。
还是按照你的代码走，这里找的是最后一个li元素<li id="c">html</li>，也就是var x=document.getElementsByTagName("li")[2];接下来进入循环：
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，所以页面会输出 ‘已经是最后一个节点’
}
-
- 任大人
- 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，所以页面会输出 ‘已经是最后一个节点’
} -
- 不知所语
- 2016-04-11 11:03:33
你上面说的符合while条件，进入循环，此时循环中的x=x.nextSibling;已经是null，那么这个时候应该执行的是返回x的值，即返回null 不就会输出吗
我知道你的意思是说文本节点后是没有节点的，但是现在不是在判断最后一个li节点的兄弟节点吗，
JavaScript进阶篇
469056 学习 · 22582 问题
相似问题