DOM编程（包含js与css交互）

最新推荐文章于 2024-09-05 16:15:02 发布

码农阿茹

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量335

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_69674158/article/details/124895642

版权

这篇博客详细介绍了DOM编程，包括DOM树、document对象的方法、获取和操作DOM对象、通过classList修改样式、节点操作、表格DOM、select下拉框、事件监听以及JS与CSS的交互。重点讲解了如何动态改变文档内容，如通过querySelector和querySelectorAll选择元素，以及通过addEventListener进行事件监听。

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

什么是DOM？

DOM是文档对象模型，是Document Object Model 的简称。通过DOM可以动态的改变文档内容，动态改变文档内容的原理是通过解析文档（如HTML）并生成DOM树。通过DOM标准接口+编程语言改变文档内容。

六.通过classList修改类名，修改样式

一、DOM树

document也是一个元素（Element）对象，document是网页中最大的父级元素。

二.document对象常用方法

方法	描述
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
getElementsByClassName()	返回带有指定类名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

三.document对象方法

通过css选择器的方式去查询节点

1）document.querySelector(“选择器”) 获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素

2）document.querySelectorAll(“选择器”) 获取满足条件的所有元素--结果是类数组注意选择器：id选择器 #id值类选择器 .类名标签选择器标签名

四.获取dom对象

getElementById() 按元素的ID名称来访问，返回对拥有指定id的第一个对象的引用
getElementsByName() 按元素的name名称来访问，返回带有指定名称的对象的集合
getElementsByClassName() 按元素的类名来访问，返回带有指定类名的对象的集合
getElementsByTagName() 按标签来访问，返回带有指定标签名的对象的集合

新增获取dom元素
1）document.querySelector(“选择器”) 获取单个
元素，如果获取的元素不止一个，那么只会返回
满足条件的第一个元素
2）document.querySelectorAll(“选择器”) 获取满
足条件的所有元素--结果是类数组
注意选择器：
id选择器 #id值
类选择器 .类名
标签选择器标签名

五.操作dom对象属性

查看/修改/删除属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
removeAttribute(“属性名”)
HTML DOM也可简化为对象名.属性值进行读取或
修改
DOM对象.属性名称
DOM对象[属性名称]


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>属性修改</h1>
		<img src="images/pic1.png" alt="一张好图"><br/>
		<button onclick="changeImg()">修改图片</button>
		<script>
			function changeImg(){
				// 获取图片
				var img = document.querySelector("img");
				// 获取图片的src属性
				console.log(img.getAttribute("src"))
				// 修改图片的src属性
				img.setAttribute("src",'./images/pic2.png');
				// 删除alt属性
				img.removeAttribute("alt");
			}
			
		</script>
	</body>
</html>

六.通过classList修改类名，修改样式

toogle()切换类名
add() 添加类名
remove() 删除类名
contains()检测是否包含类名


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		 <button type="button" onclick="toggle()">切换</button>
		 <div id="mydiv">
		 	学前端月薪过1.5万
		 </div>
		 <script type="text/

最低0.47元/天解锁文章

码农阿茹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM编程（包含js与css交互）

什么是DOM？DOM是文档对象模型，是Document Object Model 的简称。通过DOM可以动态的改变文档内容，动态改变文档内容的原理是通过解析文档（如HTML）并生成DOM树。通过DOM标准接口+编程语言改变文档内容。2.删除一个图片3.替换子节点4.复制div四、使用js操作表格一、DOM树document也是一个元素（Element）对象，document是网页中最大的父级元素。二.document对象常用方法方法 ..
复制链接

扫一扫