讲解DOM节点的获取(⼀)及判断节点类型

最新推荐文章于 2023-11-24 20:37:14 发布

Mr.ZKH

最新推荐文章于 2023-11-24 20:37:14 发布

阅读量566

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100064081

版权

DOM获取⼦节点
childNodes
使⽤childNodes获取⼦节点的时候，childNodes返回的是
⼦节点的集合，是⼀个数组的格式。他会把换⾏和空格也当
成是节点信息。

children
children不会返回⽂本节点，返回的是元素节点

DOM获取⽗节点
parentNode
获取的是当前元素的直接⽗元素，是w3c的标准

parentElement
获取的是当前元素的直接⽗元素，是ie的标准

offsetParent
获取离当前节点最近的⼀个有定位的⽗节点或祖先节点，如
果没有即为获取body

判断节点的类型
nodeType 1为元素节点 3为⽂本节点(即空格或换⾏，字符)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#bigdiv{
			position: relative;
		}
	</style>
</head>
<body>
	<div id="bigdiv">
		<div id="div1">
			<div>111</div>
			<div>222</div>
		</div>
	</div>

	<script type="text/javascript">
		var oDiv = document.getElementById('div1')

		/*使⽤childNodes获取⼦节点的时候，childNodes返回的是⼦节点的集合，
		是⼀个数组的格式。他会把换⾏和空格也当成是节点信息*/
		//console.log(oDiv.childNodes)
		var div1 = oDiv.childNodes

		//children不会返回⽂本节点，返回的是元素节点
		//console.log(oDiv.children)

		//parentNode 获取的是当前元素的直接⽗元素，是w3c的标准
		//console.log(oDiv.parentNode)

		//parentElement 获取的是当前元素的直接⽗元素，是ie的标准
		//console.log(oDiv.parentElement)

		//offsetParent 获取离当前节点最近的⼀个有定位的⽗节点或祖先节点，如果没有即为获取body
		//console.log(oDiv.offsetParent)

		//判断节点的类型
		//nodeType 1为元素节点 3为⽂本节点(即空格或换⾏，字符)
		console.log(div1[0].nodeType)
		console.log(div1[1].nodeType)
	</script>
</body>
</html>

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
讲解DOM节点的获取(⼀)及判断节点类型

DOM获取⼦节点childNodes使⽤childNodes获取⼦节点的时候，childNodes返回的是⼦节点的集合，是⼀个数组的格式。他会把换⾏和空格也当成是节点信息。childrenchildren不会返回⽂本节点，返回的是元素节点DOM获取⽗节点parentNode获取的是当前元素的直接⽗元素，是w3c的标准parentElement获取的是当前元素的直接⽗元素，是i...
复制链接

扫一扫