JavaScript基础学习——第七天（DOM 简介、事件、文档的加载、DOM 查询、图片切换练习）

最新推荐文章于 2022-11-01 19:27:18 发布
最新推荐文章于 2022-11-01 19:27:18 发布
阅读量136 收藏
点赞数
分类专栏： # JavaScript入门学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXY19990803/article/details/114108164
版权

目录
1. DOM简介
2. 事件
3. 文档的加载
4. DOM 查询
5. 图片切换练习
6. DOM 查询的其他方法

知识一：DOM简介
  • DOM，全称 Document Object Model 文档对象模型。JS 中通过 DOM 来对 HTML 文档进行操作，只要了解 DOM 就可以随心所欲的操作 Web 页面。
  • 浏览器会根据DOM模型，将结构化文档（比如Html或者xml等）解析成一系列的节点，再由这些节点解析成树状结构（Dom Tree），所有的节点和最终的树状结构都有规范的对外接口，所以DOM可以理解成网页的编程接口。
  • 文档：表示的就是整个 HTML 网页文档
  • 对象：表示将网页中的每一个部分都转换为了一个对象
  • 模型：使用模型来表示对象之间的关系，这样方便我们获取对象
  • 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为一个节点。比如：HTML标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但是实际上他们的具体类型是不同的，比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。节点类型不同，属性和方法也都不尽相同。
  • 节点的属性：
nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容
  • 举例（注意，在下面的例子中，script 标签是写在了 body 标签里的，这个在文档的加载中会讲。
    ）：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 浏览器已经为我们提供 文档节点 对象，这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			//console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";

		</script>
	</body>
</html>

知识二：事件

  • 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript 与 HTML 之间的交互是通过事件实现的。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			我们可以在事件对应的属性中设置一些js代码，
				这样当事件被触发时，这些代码将会执行
			
			onmousemove 是对应的事件属性
				
			这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	
		-->
		<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>
		<button id="btn1">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 事件，就是用户和浏览器之间的交互行为，
			 * 	比如：点击按钮，鼠标移动、关闭窗口。。。
			 */

			//获取按钮对象
			var btn = document.getElementById("btn1");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			
			//绑定一个单击事件
			//像这种为单击（双击）事件绑定的函数，我们称为单击（双击）响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};

		</script>
	</body>
</html>

知识三：文档的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边，
			 * 	在代码执行时，页面还没有加载，页面没有加载，DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
	
			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};

		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>
  • 注意：这两种方法中最优的性能是将其写在下面

知识四：DOM 查询

  • 通过 document 对象获取元素节点的三种方式
getElementById()通过 id 属性获取一个元素节点对象
getElementsByTagName()通过标签名获取一组元素节点对象
getElementsByName()通过 name 属性获取一组元素节点对象
  • 通过具体的元素节点获取元素节点的子节点：
getElementsByTagName()方法，返回当前节点的指定标签名后代节点
childNodes属性，表示当前节点的所有子节点
firstChild属性，表示当前节点的第一个子节点
lastChild属性，表示当前节点的最后一个子节点
  • 通过具体的节点获取父节点和兄弟节点：
parentNode属性，表示当前节点的父节点
previousSibling属性，表示当前节点的前一个兄弟节点
nextSibling属性，表示当前节点的后一个兄弟节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
			 */
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
					//alert(pn.innerText);
					
					
				});
				
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					
					alert(ps);
					
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
				
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "今天天气真不错~~~";
				});
				
				
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					
					//获取bj中的文本节点
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					
					alert(bj.firstChild.nodeValue);
					
					
				});
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

知识五：图片切换练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>

知识六：DOM 查询的其他方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				
				console.log(all.length);
				
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")
				
				//console.log(div.innerHTML);
				console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		
		<div></div>
	</body>
</html>
点击回到顶部
please tell me
关注
专栏目录
DOM增删改查练习
沉梦昂志
07-10 303
练习一 效果图 heml代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</
JavaScript实战操作（DOM，BOM）
qq_43542290的博客
11-19 581
JS语法页面文档对象模型浏览器对象模型JSECMAScriptDOMBOM API 应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） DOM 可以改变网页的内容、结构和样式 DOM树 文档：一个页面就是一个文档 document 元素：页面中的所有标签都是元素，element 节点...
DOM的增删改查
Always-Learning
11-26 166
1：在id名为city的div下添加一个li标签，标签内容为广州。 # 1：创建li元素 var li = document.createElement("li"); # 2：创建文本节点 var guangzhou = document.createTextNode("广州"); # 3：将li元素与文本绑定在一起 li.appendChild(guangzhou); # 4：获取id为city的节点 var city = document.getElementById("city"); # 5：将组合好
DOM的操作（增删改查）
weixin_30359021的博客
08-12 388
操作DOM的核心就是增删改查 目录 一、节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二、页面修改形API（包括删除和添加）（删）（改） 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入...
dom增删改查
cdut2016的博客
06-18 299
Dom文档对象模型 把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。 这里我就直接创建一个实例就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#">aa
初识 jQuery基础Day1——笔记整理（总结）+ 课后练习 ×1
Myself's CSDN
05-25 363
一. jQuery的概念 jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是"write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 二. jQuery 的基本使用 1. jQuery 的下载 ​
不看后悔系列——JQuery学习笔记
筱筱攻程师的博客
04-24 1937
文章目录初识jQuery1.jQuery下载地址1.2jQuery和JS的加载模式1.3jQuery冲突问题2.jQuery核心函数和工具方法2.1jQuery核心函数2.2jQuery对象2.3jQUery静态方法和实例方法2.4静态方法each2.5 map方法2.6 jQuery中的其它静态方法2.7 静态方法holdReady方法3. jQuery属性操作3.1 jQuery基本选择器3.1.1 基本选择器3.1.2 层次选择器3.2 jQuery过滤选择器3.2.1 基本过滤选择器3.2.2 内容
【学习笔记】「Web APIs」JavaScript进阶
weixin_44802075的博客
08-27 380
前言 1.1 JS的组成 1.2 JS基础阶段及Web APIs阶段 2.1 API 2.2 Web API 2.3 API和Web API总结 一、DOM 1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2...
Javascript笔记大全02
qwq_666的博客
08-03 424
DOM 简介 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 DOM树 窗口加载事件 // 为window绑定一个onload事件 window.onload = function() {} 或者 window.addEventListener('load',function() {}); // 该事件对应的响应函数将会在页面加载完成之后执行 // 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
DOM增删改查
KennGum的博客
07-06 311
DOM 查询 节点的属性 获取元素节点 获取元素节点的子节点 获取父节点和兄弟节点 DOM查询的其他方法 DOM增删改 Window常用对象方法 节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 获取元素节点 通过document对象调用 getElementById() 通过 id 属性获取一个元
js中DOM的增删改查
weixin_43735593的博客
11-23 1225
js中DOM的增删改查 常见的Dom、html的操作不外乎查找节点、增加节点（尤其是动态渲染数据的时候）、修改节点内容、删除节点。 查找节点 1、一般就是document.getElement(s)系列，主要有document.getElementById(‘id’)、document.getElementsByClassName(‘classname’)、document.getElements...
DOM操作（增删改查）
weixin_51405694的博客
05-18 298
DOM操作（增删改查）
DOM——元素的增删改查
Meat_doll的博客
07-17 123
老师上课讲的知识点
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3830
DOM操作：事件、增、删、改查
DOM实现增删改查
qq_65168354的博客
11-01 185
不知道大家发没发现，很多时候啊，我们不方便直接在body里面写标签以及样式那些，之后我们又会从后台获取数据，然后再放到界面上，哎呀，没学过DOM的小伙伴就头疼了，这可怎么办啊，好难写啊。不怕，我下面就写几个简单的DOM增删改查的操作，我们大家一起来认识认识。
DOM操作-元素的增删改查
m0_68348293的博客
07-17 208
代码】元素的增删改查。
JavaScript DOM事件操作实例详解：从基础到实战
总结来说，本文提供了JavaScript DOM事件操作的基础知识和实践示例，这对于理解和运用JavaScript进行前端交互开发至关重要。掌握这些内容，能够帮助开发者更好地控制和响应用户的操作，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值