原生js中nextSibling和nextElementSibling的坑

作者:拓海老师,公众号:拓海老师

一直以来js的随性让初学者蛋疼菊紧,但是真正玩熟了之后,还是非常有意思的!

今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑!
业务场景:点击当前元素,让其下一个紧挨着的兄弟元素展现出来,类似自定义下拉菜单。如下,点击div,让ul展现出来,此时就要用到一个dom操作nextSibling获取下一个元素。


<html>
 <head>
  <meta charset="UTF-8">
  <title>测试title>
 head>
 <body>
	<div onclick="show(this)">列表名div>	
	<ul style="display:none;">
		<li>内容1li>
		<li>内容2li>
		<li>内容3li>
	ul>
	<script>
		function show(el){
			var e = el.nextSibling;
			console.log(e); //#text
		}
	script>
 body>
html>

但是,这里打印的结果不是 ul,而是#text,也就是文本,额没zing… 哪里来的文本?
让我来解释一波,因为整个html文档可以看做是一个dom节点树,(对于dom不理解的,私我微信tcpz0802),整个页面中节点包含了:标签,文本,空白字符[回车,换行等],而在divul之间恰好敲了回车,此时调用元素的nextSibling获得的就是它。

找到了问题所在,如何解决呢?正确方式,使用nextElementSibling即可,他获取的就是Element,可以忽略文本。代码如下:


<html>
 <head>
  <meta charset="UTF-8">
  <title>title>
 head>
 <body>
	<div onclick="show(this)">列表名div>	
	<ul style="display:none;">
		<li>内容1li>
		<li>内容2li>
		<li>内容3li>
	ul>
	<script>
		function show(el){
			var e = el.nextElementSibling;
			e.style.display = e.style.display=="none"?"block":"none";
		}
	script>
 body>
html>

这样一个自定义下拉菜单就完成了!!!

你可能感兴趣的:(05-web前端,js,javascript)