【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十九)

1,706 阅读6分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动, 本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。

为了感谢掘金读者这段时间的支持,在主页放上了私人微信,有需要技术交流等可直接加阿ken微信与我交流哦

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

3. 获取兄弟节点 nextSibling、previousSibling、nextElementSibling、previousElementSibling 属性

在 JavaScript 中,可以使用 nextSibling 属性来获得下一个兄弟节点,使用previousSibling 属性来获得上一个兄弟节点。它们的返回值包含元素节点或者文本节点等。如果找不到,就返回 null。

如果想要获得兄弟元素节点,则可以使用 nextElementSibling 返回当前元素的下一个兄弟元素节点,使用 previousElementSibling 属性返回当前元素的上一个兄弟元素节点。如果找不到则返回 null。

要注意的是,这两个属性有兼容性问题,IE9 以上才支持。

实际开发中,nextSibling 和 previousSibling 属性返回值都包含其他节点,操作不方便,而 nextElementSibing 和 previousElementSibling 又有兼容性问题。为了解决兼容性问题,在实际开发中通常使用封装函数来处理兼容性。

示例代码如下:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>
	<body>
		
		<script>
			
			function getNextElementSibling(element) {
				var el = element;
				while (el = el.nextSibling) {
					if(el.nodeType === 1) {
						return el;
					}
				}
				return null;
			}
			
		</script>
		
	</body>
</html>

上述代码中,定义了 getNextElementSibling() 函数,参数为 element。在 while 循环中,通过 if 条件语句进行判断,如果 nodeType 属性值等于 1,那么获取到的节点类型为元素节点。

7.4.3_[ 案例 ] 下拉菜单

下拉菜单在阿站中的应用非常广泛,例如,鼠标指针经过下拉菜单时,显示当前下拉框中的内容,并隐藏其他下拉菜单内容。具体实现步骤如下。

(1) 编写 HTML 代码完成页面布局。

<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href=""> 私信</a></li>
<li><a href=""> 评论</a></li>
<li><a href="">@ 我</a></li>
</u1>
</li>
...(此处省略3个li)
</u1>
</body>

上述代码采用 ul、li 的结构布局,ul 下有多个下拉菜单 li,每个 Ii 中有一个 a 和 ul 列表,a 为标签名,ul 为下拉内容。当鼠标指针经过 li 时,li 中的 ul 显示;当鼠标指针离开 li 时,li 中的 ul 隐藏。

(2) 鼠标指针经过时展示当前下拉列表内容,示例代码如下。

<script>
// 1.获取元素
var nav = document.querySelector('.nav');
var lis = nav.children;
// 2.注册鼠标指针经过和鼠标指针离开事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'; // ul为li的第2个子元素
};
lis[i].onmouseout = function ()
this.children[1].style.display = 'none';
};
}
</script>

上述代码中,第 3、4 行代码获取类名为 nav 下的4个 li 。第 6 ~ 13 行代码使用 for 循环注册事件,其中第 7 ~ 9 行代码表示当鼠标指针经过时,设置当前 li 的第 2 个子元素 ul 显示;当鼠标指针离开时,则隐藏当前 li 的第 2 个子元素 ul 内容。

7.5_节点操作

7.5.1_创建节点

在获取元素的节点后,还可以利用 DOM 提供的方法实现节点的添加,如创建一个 li 元素节点,为 li 元素节点创建一个文本节点等。

在 DOM 中,使用 documentcreateElement(‘tagName’)方法创建由 tagName 指定的 HTML 元素。因为这些元素在原先是不存在的,是根据实际开发需求动态生成的,所以也称为动态创建元素节点。

动态创建元素节点有 3 种常见方式,具体如下。

( 1 ) document.write()

document.write() 创建元素,如果页面文档流加载完毕,再调用会导致页面重绘。

( 2 ) element.innerHTML

element.innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘。

( 3 ) document.createElement()

document.createElement() 创建多个元素时效率稍微低一点, 但是结构更加清晰。

🌊🌈往期回顾:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十八)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十九)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(二十)

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十八)

🌊🌈关于后记:

感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易,「点赞」+「关注」 谢谢支持❤