JavaScript基础操作——对父节点、子节点、兄弟节点和自定义属性的操作

最新推荐文章于 2022-08-10 11:27:07 发布

失忆症患者_

最新推荐文章于 2022-08-10 11:27:07 发布

阅读量625

点赞数

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41929578/article/details/108978396

版权

JavaScript基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

父节点操作：节点.parentNode

<body>
		<div id="divv">
			<span class="span"></span>
		</div>
		<script type="text/javascript">
			var span = document.querySelector('.span')
			console.log(span.parentNode)
		</script>
	</body>

子节点操作：节点.childNodes

返回所有子节点,包括元素节点、文本节点等

<body>
		<div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			
			<ol>
				<li>1</li>
				<li></li>
				<li></li>
				<li>4</li>
			</ol>
		</div>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			console.log(ul.childNodes)//返回所有子节点,包括元素节点、文本节点等
			console.log(ul.childNodes[0].nodeType)
			console.log(ul.childNodes[1].nodeType)
			//返回元素节点
			console.log(ul.children)
			
			var ol = document.querySelector('ol');
			console.log(ol.firstChild)//第一个换行符号
			console.log(ol.lastChild)
			
			console.log(ol.firstElementChild)//获取第一个元素节点，但是存在兼容性问题
			
			//实际开发中使用,获取第一个子元素或者获取最后一个元素
			console.log(ol.children[0])
			console.log(ol.children[ol.children.length-1])
		</script>
	</body>

兄弟节点操作

<body>
		<div>5555</div>
		<sp>23333</sp>
		<script type="text/javascript">
			var div = document.querySelector('div');
			console.log(div.nextSibling)//下一个兄弟节点，包括元素节点、文本节点
			console.log(div.previousSibling)
			
			console.log(div.nextElementSibling)//下一个兄弟节点，只包括元素节点
		</script>
	</body>

自定义属性的操作

获取class名称：div.className；
获取id名称：div.id；
获取自定义的属性：div.getAttribute(‘index’)；
设置元素的值：div.id = ‘text’；
自定义设置属性值：div.setAttribute(‘id’,‘divvv’)；

<body>
		<div class="nav" id="demo" index="2"></div>
		<script type="text/javascript">
			var div = document.querySelector('div')
			console.log(div.className)
			console.log(div.id)//获取属性值
			console.log(div.getAttribute('index'))//可以获取自定义的属性
			//设置元素的值
			div.id = 'text'
			console.log(div.id)//获取属性值
			//自定义设置属性值
			div.setAttribute('id','divvv')
			console.log(div.id)
		</script>
	</body>

失忆症患者_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础操作——对父节点、子节点、兄弟节点和自定义属性的操作

父节点操作：节点.parentNode<body> <div id="divv"> <span class="span"></span> </div> <script type="text/javascript"> var span = document.querySelector('.span') console.log(span.parentNode) </script> &lt.
复制链接

扫一扫