节点操作之兄弟节点

最新推荐文章于 2022-08-25 06:00:00 发布

hcoke

最新推荐文章于 2022-08-25 06:00:00 发布

阅读量1.2k

点赞数

分类专栏：学习笔记文章标签： javascript html webview

本文链接：https://blog.csdn.net/m0_62962469/article/details/123487110

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

node.nextSibling 返回下一个兄弟节点包含元素节点或者文本节点等等

node.previousSibling 返回上一个兄弟节点包含元素节点或者文本节点等等

node.nextElementSibling 返回下一个兄弟元素节点不包括文本节点 ie9以上支持

node.previousElementSibling 返回上一个兄弟元素节点不包括文本节点 ie9以上支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box"></div>
		<span></span>
		<script type="text/javascript">
			var div = document.querySelector('.box');
			//下一个节点是兄弟节点 包含元素节点或者 文本节点等等
			console.log(div.nextSibling);  //这里返回的是换行
            console.log(div.previousSibling);   //这里也返回的是换行  上一个兄弟节点
            //下一个或上一个兄弟元素节点 
            console.log(div.nextElementSibling);  
			console.log(span.previousElementSibling);
		</script>
	</body>
</html>

假如存兼容性问题，可以构造函数解决：

function getNextElementSIbling(element) {
				var el = element;
				while (el = el.nextSibling) {
					if(el.nodeType === 1) {
						return el;
					}
				}
				return null;
			}