[前端]为什么兄弟元素节点出现的结果是null?

clearwater 发表于 2020-3-11 19:58

本帖最后由 clearwater 于 2020-3-11 20:33 编辑

某前端老师说：兄弟节点的元素如果要取的话，做不到兼容，除非自己封装一个函数。（第16-24行是老师封装的函数，其余的代码是我写的）
可是为什么26行输出的结果是null，而不是span?

div的下一个兄弟元素节点是span. 请问我哪里写错了？
（老师说兄弟元素节点，这个用得比较少。不过我想了解一下。）
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div>12</div>
<span>222</span>
<script>
   var div = document.querySelector('div');
   function getNextElementSibling(element) {
         var el = element;
         while (el = el.nextSibling) {
            if (el.nodeType === 1) {
               return el;
            }
         }
         return null;
   }
   var i = getNextElementSibling('div');
   console.log(i);

</script>

</body>

</html>

传说中的五号 发表于 2020-3-11 20:11

var i = getNextElementSibling(div);
console.log(i);

clearwater 发表于 2020-3-11 20:15

传说中的五号发表于 2020-3-11 20:11

我把引号去掉了，出现还是 null

{:1_904:}:rggrg

EnterpriseSolu 发表于 2020-3-11 20:22

我提个小建议，直接上Jquery，DOM和Javascript的知识在使用Jquery的过程中掌握，否则单纯搞DOM会把人折腾崩溃
$("div")可以找出所有的div, 然后就可以foreach等操作

上面的代码，加一下 <script type="javascript" >
其次，el.nodeType === 1 这一句可能是错的，

我有个终极解决问题的建议，你可以用开发工具调试，单步运行，这样可以知道为什么没有取到值, IE 和 Chrome都自带开发工具，F12调出来，放个断点，一步步运行代码

泪鱼无梦 发表于 2020-3-11 20:26

clearwater 发表于 2020-3-11 20:15
我把引号去掉了，出现还是 null

第一个大佬回答的是对的

泪鱼无梦 发表于 2020-3-11 20:27

删掉引号就好了

clearwater 发表于 2020-3-11 20:28

泪鱼无梦发表于 2020-3-11 20:26
第一个大佬回答的是对的

谢谢各位大神回复。

那为啥我输出的结果不是span, 还是null?

cl19980429 发表于 2020-3-11 20:28

我输出的是 span

clearwater 发表于 2020-3-11 20:32

cl19980429 发表于 2020-3-11 20:28
我输出的是 span

谢谢。我看眼花了。

明天再给您补评分。现在没能量辣。

clearwater 发表于 2020-3-11 20:37

本帖最后由 clearwater 于 2020-3-11 20:38 编辑

泪鱼无梦发表于 2020-3-11 20:26
第一个大佬回答的是对的
我搞明白了。ＤＩＶ是变量。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

[前端]为什么兄弟元素节点出现的结果是null?