JavaScript DOM编程(如何获取HTML标签的父元素和子元素)

客行.

已于 2022-04-27 09:50:20 修改

阅读量1.2w

点赞数 10

文章标签： javascript html 开发语言

于 2022-03-03 11:01:56 首次发布

本文链接：https://blog.csdn.net/m0_65725031/article/details/123243934

版权

本文介绍了JavaScript中的DOM概念，并详细讲解了如何通过DOM获取HTML标签的父元素和子元素，包括Element的常用属性和方法，如parent、children等。还探讨了如何使用JS操作表格，提供了具体的代码示例帮助读者理解和实践。

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

今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!!

一.什么是DOM?

DOM其实就是文档对象模型，由该三个单词组成Document Object Model。
通过DOM可以动态改变文档

二.动态改变文档内容的原理

解析文档（如HTML）并生成DOM树
通过DOM标准接口+编程语言改变文档内容

三.DOM树中的节点类型和节点关系

document:网页中最大的父级元素是DOM树的最上级 Element:元素其实元素就是网页中的HTML标签 Node:节点就把他理解成和元素是同一种就是HTML标签

四.Element常用属性(如何使用)

1	Element.parent	获取该元素的父级
2	Element.children	获取该元素中所有的子元素标签
3	Element.childElementCount	获取该元素中的子元素个数
4	Element.firstElementChild	获取该元素的第一个元素
5	Element.lastElementChild	获取该元素的最后一个元素
6	Element.previousElementSibling	拿到该元素的上一个相邻元素
7	Element.nextElementSibling	拿到该元素的下一个相邻元素

注：Element:元素也就是HTML标签,我们通常给标签一个id名，使用id名调用属性

列如:

<div id="div">

<img src="img/1.gif">

</div>

获得div的子级元素，要写在我们的<script>标签中

<script>

这个div是我们的给<div>标签设置的id名

div.Element.children

</script>

1.Element.parent 获取元素的父级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 
		<div id="div">
			<img src="img/1.gif">
			<img src="img/2.gif" id="img">
			<img src="img/3.gif">
		</div>
	
		<!-- 网页中最大的父级元素是document -->
<script>
		// 给img标签的父元素设置背景颜色
		//  Element.parentElement拿到该元素的父级
		// Element:元素(也可以称为标签) 元素就是标签的意思
		// 注:这里的img是给标签设置的一个id名
		  img.parentElement.style.background="yellow";
		
</script>
		
	</body>
</html>

2. Element.children 获取该元素中所有的子元素标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 
		<div id="div">
			<img src="img/1.gif">
			<img src="img/2.gif" id=