JavaScript-一个关于nextSibling和previousSibling的诡异问题求解

JavaScript-一个关于nextSibling和previousSibling的诡异问题求解

想挽留 发布于 2017-07-26 字数 1260 浏览 1201 回复 4

今天在写一个简单的代码的时候碰到一个问题:

输出结果为 undefined undefined li2 不是预期的结果。

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="JavaScript">
function test() {
var node = document.getElementById("li2");

alert(node.nextSibling.id);  //li3

alert(node.previousSibling.id); //li1
alert(node.nextSibling.previousSibling.id); //li2
}
</script>
</head>
<body>
<ul>

<li id="li1">这是li1</li>

<li id="li2">这是li2</li>

<li id="li3">这是li3</li>
</ul>
<input type="button" value="点我!" onClick="test();" />
</body>
</html>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

灵芸 2017-09-20 4 楼

首先,ff 对节点的解释跟其他浏览器不一样,你的li 之间有空格或回车会当成一个节点计算,所以你要判断 nextsibling 的节点类型即nodetype 的类型,是文本还是节点类型。

归属感 2017-08-25 3 楼

因为你有回车,在 dom 标准里面,他们也算是节点,所以你 node.nextSibling.idnode.previousSibling.id 其实只是空行的文本节点,再补充一点: ie 对此的解析不同。

灵芸 2017-08-20 2 楼

下面这样就可以了,是因为你的li中有回车。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function test() {
var node = document.getElementById("li2");
alert(node.nextSibling.id);  //li3
alert(node.previousSibling.id); //li1
alert(node.nextSibling.previousSibling.id); //li2
}
</script>
</head>
<body>
<ul>
<li id="li1" class="li1">这是li1</li><li id="li2">这是li2</li><li id="li3">这是li3</li>
</ul>
<input type="button" value="Click Me!" onClick="test();" />
</body>
</html>

灵芸 2017-08-06 1 楼

function test() {
var node = document.getElementById("li2");
alert(node.nextSibling.nextSibling.id);  //li3
console.log(node.nextSibling.nextSibling);
alert(node.previousSibling.previousSibling.id); //li1
alert(node.nextSibling.previousSibling.id); //li2
}

这样好使,具体搜索 js nextSibling,网上解释很清楚了。