JavaScript——DOM之节点操作

最新推荐文章于 2023-04-29 17:45:14 发布

sanma鱼

最新推荐文章于 2023-04-29 17:45:14 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/weixin_46558137/article/details/108036900

版权

本文详细介绍了JavaScript中DOM的节点操作，包括节点层级的访问，如父节点、子节点、兄弟节点的获取，以及如何创建、删除、复制节点。通过案例展示了动态创建元素的方法，如`appendChild`、`insertBefore`，并讨论了不同动态创建元素方式的区别。此外，文章还探讨了DOM的核心概念及其在JavaScript中的应用。

摘要由CSDN通过智能技术生成

节点操作

前述：

学习节点操作是为了更好地操作获取元素。在这之前，我们学习了获取元素的几种方法：
● document.getElementByld（）
● document.getElementsByTagName（）
●document.querySelector（）等
但是此方法我们用起来逻辑性不强、繁琐

在这之外还有一种方法：
利用节点层级关系获取元素
●利用父子兄节点关系获取元素
●逻辑性强,但是兼容性稍差

一、节点的概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JaveScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

在这里插入图片描述

二、节点操作

1.节点层级

利用DOM树可以把节点划分为不同的层级关系常见的是父子兄层级关系
在这里插入图片描述
1.父级节点 node.parentNode
parentDode 属性可返回某节点的父节点，注意的是：返回最近的一个父节点
如果指定的节点没有父节点则返回null

<body>
<div class="father">
					<div class="son">
					
					</div>
				</div>
</body>
<script>
var so = document.querySelector('.son') ;
		console.log(so.parentNode);
		</script>

输出结果：
在这里插入图片描述
2.子节点
a.parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点、文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用chlidNodes
var ul = document.querySelector(‘ul’) ;
for(var i = 0 ; i < ul.childNodes.length ; i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[ i ] ) ;
}
}
b.parentNode.firstElementChild
返回第一个子元素节点，找不到则返回null。
c.parentNode.lastElementChild
返回最后一个子元素节点，找不到返回null。
需要注意的是：这两个方法有兼容性问题，要IE9以上才支持。

在实际开发中，firstChild和lastChild 包含其他节点,操作不方便,而firstElementChild和lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1,如果想要第一个子元素节点,可以使用parentNode. chilren[0]
2,如果想要最后一个子元素节点,可以使用parentNode. chilren.length - 1

2、案列-下拉菜单

		<style type="text/css">
			.father div{
   
				display: none;
			}
		</style>
	</head>
	
	<body>
		<ul class = "father">
			<li>
				1
				<div >
					哈哈
				</div>
			</li>
			<li>
				2
				<div >
					嘿嘿
				</div>
			</li>
			<li>
				3
				<div >
					嘻嘻
				</div>
			</li>
			<li>
				4
				<div >
					啦啦
				</div>
			</li>
		</ul>
		<script type="text/javascript">
			var fa = document.querySelector('.father');
			var lis = fa.children;
			console.log(lis)
			for(var i=0;i<lis.length;i++){
   
				lis[i].onmouseover = function(){
   					
					this.children[0].style.display = 'block'
				}
				lis[i].onmouseout = function(){
   
					this.children[0].style.display = 'none' ;
				}
			}
		<