JavaScript 第五章 （API、DOM、JS节点、事件）

已于 2023-11-12 15:27:42 修改
阅读量42 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-10-29 14:45:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_fiv/article/details/134102891
版权

 什么是API

应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。

 翻译：对HTML内部的标签进行处理。

通过DOM节点获取HTML元素的4种方法

//通过DOM节点获取HTML元素的4种方法  每种方法都要掌握.非常相似.
            
方法1:通过标签名获取元素
            var a = document.getElementsByTagName("h3");
            //此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            //至于怎么去处理,就是后续的任务.
            
方法2:通过class名获取元素
            var b = document.getElementsByClassName("a");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
方法3:通过name获取元素
            var c = document.getElementsByName("b");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理
            var d = document.getElementById("c");

如何操作节点

常见的操作节点的三个属性：
                    1.innerText表示给标签内部重新赋值或取值  这里是文本值
                    
                    2.innerHtml表示给标签内部重新赋值或取值  这里是html值
                    
                    
                    注意以上2个方法只能作用于 非表单元素  例如 h标签  a标签   p标签等等
                    
                    //第三个方法只能作用于表单元素
                    例如input  
                    
                    方法3：  value表示给标签内部重新赋值或取值  这里是html值


			// var a = document.getElementsByTagName("h3");
			// for(var i = 0 ;i<a.length;i++){
			// 	console.log(a[i].innerText);//表示获取各个h3标签内部的文本值
			// 	a[i].innerHTML = "<a href='#'>你好</a>";
			// }
			
			
			
			// var b = document.getElementsByClassName("a");
			// for(var i = 0 ;i<b.length;i++){
			// 	console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值
			// }
			
			
			
			
			
			var d = document.getElementById("abc");
			// d.value = "账号123";
			console.log(d.value);

如何操作节点的样式

如何改变一个节点的样式:  
            //步骤1.思考需要修改什么样式
            //步骤2.去css里面查看该样式的单词
            //步骤3.按照提示来
            //步骤4.通过    节点.style.xxx  表示取值或赋值

例如我要修改字体颜色
            // p.style.color = "red";
            // console.log(p.style.color)
            
例如我要修改背景色
            // p.style.backgroundColor = "green"
            
以上写法的缺点: 麻烦  每次只能修改一个样式
所以:  如果样式很多,我们可以先将其封装到一个css里面
            p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性

JS中的事件管理

//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
            //例如用户的单击  双击   等等等等
            
            //需求:用户点击id为a的元素  弹出一个窗口
            //步骤1:获取元素   
            // 步骤2:  元素.事件名 = function(){代码体}
            //步骤3 常见的事件名:
 

单击事件 onclick


			// document.getElementById("a").onclick = function(){
			// 	alert(123);
			// }
			
			
			// //需求2:给所有的p标签加上点击事件  下面的写法是错误的 需要遍历
			// // document.getElementsByTagName("p");.onclick = function(){
			// // 	alert(123);
			// // }
			// var p = document.getElementsByTagName("p");
			// for(var i = 0 ;i<p.length;i++){
				
			// 	p[i].onclick = function(){
			// 		alert(456);

单击事件案例

双击事件 

// document.getElementById("a").ondblclick  = function(){
			// 	alert(123);
			// }

双击事件案例

<button>双击打开登录页面</button>
		
		<div>
			<h3>登录弹窗！！</h3>
			账号<input type="text" placeholder="请输入你的账号" /> <br>
			密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>
			<button>登录</button>  <button>返回</button>
		</div>
		
		
		
		<script>
			
			//思考:浏览器中的弹窗为啥那么好看
			//但是我们学习的三个弹窗 一个比一个丑 
			//其实浏览器的弹窗 并不是真正的弹窗.
			//思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.
			
			
			//需求:双击打开登录页面
			document.getElementsByTagName("button")[0].ondblclick = function(){
				
				document.getElementsByTagName("div")[0].style.display = "block";
				
			}
			
			document.getElementsByTagName("button")[2].onclick = function(){
				document.getElementsByTagName("div")[0].style.display = "none";
			}
		</script>

 鼠标移入事件 悬浮事件

//需求:鼠标放上图片   图片就放大2倍  鼠标移出就恢复原状

鼠标移入事件onmouseover

// document.getElementsByTagName("img")[0].onmouseover = function(){
			// 	document.getElementsByTagName("img")[0].style.width = "400px";
			// 	document.getElementsByTagName("img")[0].style.height = "400px";
			// }

鼠标移出事件onmouseout

// document.getElementsByTagName("img")[0].onmouseout = function(){
			// 	document.getElementsByTagName("img")[0].style.width = "200px";
			// 	document.getElementsByTagName("img")[0].style.height = "200px";
			// }

鼠标移入移出案例

<style>
			.a{
				width: 200px;
				height: 200px;
			}
			.b{
				width: 400px;
				height: 400px;
			}
			
			
		</style>
	</head>
	<body>
		
		<img class="a" src="img/1.PNG"> 
		
		<script>
			//需求 鼠标移入图片内部 ,图片放大  鼠标移出图片  图片还原 
			var img = document.getElementsByTagName("img")[0];
			
			img.onmouseover = function(){
					// img.style.width = "400px";
					// img.style.height = "400px";
					img.className = "b";
			}
			
			img.onmouseout = function(){
					// img.style.width = "200px";
					// img.style.height = "200px";
					img.className = "a";
			}
			
		</script>

输入账号,失去焦点就需要数据校验

document.getElementById("aaa").onblur = function(){
				var str = document.getElementById("aaa").value;
				 if(str.length >10){
					 document.getElementById("bbb").innerText = "长度太长了";
					 document.getElementById("bbb").style.color = "red";
				 }else{
					 document.getElementById("bbb").innerText = "数据合格";
					 document.getElementById("bbb").style.color = "green";
				 }
			}

输入账号,失去焦点就需要数据校验案例

<body>
		账号：<input type="text" id="a" />  		<span id="c"></span>  		<br>
		
		<script>
			var username = document.getElementById("a");
			var password = document.getElementById("a");
			var tip1 = document.getElementById("c");
			var tip2 = document.getElementById("d");
			
			//需求:输入账号之后.提示账号输入规则.
			//思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
			username.onfocus = function(){
				tip1.innerText = "账号的长度要在6-10之间";
				tip1.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			username.onblur = function(){
				var username123 = username.value; 
				if (username123.length >=6  && username123.length<=10) {
					tip1.innerText = "√";
					tip1.style.color = "green";
				} else{
					tip1.innerText = "X";
					tip1.style.color = "red";
				}
			}

js获取元素的属性

元素的常见属性:  id   class   src  href

//需求:点击按钮 让这个a标签的href改成跳转到第二个页面
			//需求 点击按钮,进入下一张图片
			document.getElementById("abc").onclick = function(){
				document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
				document.getElementById('b').setAttribute("src","img/2.PNG");
			}
//点击开始点名按钮 来回切换
			document.getElementById("btn").onclick = function(){
				if(document.getElementById("btn").innerText=="开始点名"){
					document.getElementById("btn").innerText = "停止点名"
				}else{
					document.getElementById("btn").innerText = "开始点名"
				}
			}

从大到小案例

编写一个JavaScript函数changeArray，
接受一个数组参数，功能是将该数组按照从小到大的顺序重新排列

<script>
			//编写一个JavaScript函数changeArray，
			//接受一个数组参数，功能是将该数组按照从小到大的顺序重新排列。
			var arr = [13,34,45,8,67,654,765];
			
			changeArray(arr);
			
			console.log(arr);
			
			function changeArray(arr){
				for (var i = 0 ;i<arr.length-1;i++) {//定义冒泡的次数
					for(var j = 0;j<arr.length-i ;j++){
						if(arr[j]>arr[j+1]){
							var temp = arr[j];
							arr[j] = arr[j+1];
							arr[j+1] = temp;
						}
					}
				}
			}

修改元素的属性

<body>
		<img src="img/1.PNG" />
		<button>替换图片</button>
		
		<script>
			//html元素是有很多属性的.
			//例如 id  class  name  src   href   
			
			document.getElementsByTagName("button")[0].onclick = function(){
				//将xxx元素的aaa属性改成bbb
				//xxx.setAttribute("aaa","bbb");
				
				//var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值
				
				// document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
				
				
				if(document.getElementsByTagName("img")[0].getAttribute("src")  == "img/1.PNG" ){
					document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
				}else{
					document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
				}
				
				
			}
			
			
		</script>

表单

表单：form
            应用场景：  用户登录、  用户注册     添加一个商品信息
            
            凡是需要将多个数据打包发送的 都可以使用表单。

form表单三大属性

A.action表示将表单提交给谁。一般放一个URL地址  其中#表示不提交
B.method表示表单的提交方式：只有2个选择、1.get  2.post 默认是get。

区别

区别如下：
                get的速度快。因为只能携带极少的数据。 不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）
                
                post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）
            
            C.enctype：表示该表单是什么类型的表单。
            默认值1：    application/x-www-form-urlencoded 表示普通表单 所以：绝大部分表单都可以不用加。
            可选值2：    multipart/form-data               表示文件上传的表单。如果需要文件上传就只能用这个。
            可选值3：    text/plain                        表示大文本类型 常用于国家化传输邮件。
 

如何将表单打包发送给action的路径：

通过提交按钮：以下三种方式 均可。  一般使用第三种。
            1 <button>提交（登录）</button> 
            2 <button type="submit">登录提交</button>
            3 <input type="submit" value="登录提交" />

后台如何获取表单内部的数据

只需要在表单内部的标签元素中 添加name属性即可。（必须要加的，否则获取不到值）
            后台只需要根据name来取值。

串讲：button标签的易错事项

button标签的完整写法：
            <button type="xxx">按钮</button>
            其中type的取值有3个：
            1.submit  默认值  表示提交按钮
            2.button  可选择  表示普通的按钮
            3.reset   可选择  表示重置按钮
            
            button标签中type属性的默认值是 submit  如果该标签放在form表单则会提交表单。
            但是如果没在，就是一个普通的按钮

演示表单提交事件

<form id="f" action="#" method="post">
			账号：<input type="text" id="a" />  			<span id="c"></span>  		<br>
			密码：<input type="password" id="b" />  		<span id="d"></span>  		<br>
			<input type="submit" value="登录" />
		</form>
		<script>
			var username = document.getElementById("a");
			var password = document.getElementById("b");
			var tip1 = document.getElementById("c");
			var tip2 = document.getElementById("d");
			var f = document.getElementById("f");
			
			
			//需求:输入账号之后.提示账号输入规则.
			//思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
			username.onfocus = function(){
				tip1.innerText = "账号的长度要在6-10之间";
				tip1.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			username.onblur = function(){
				var username123 = username.value; 
				if (username123.length >=6  && username123.length<=10) {
					tip1.innerText = "√";
					tip1.style.color = "green";
				} else{
					tip1.innerText = "X";
					tip1.style.color = "red";
				}
			}
			
			password.onfocus = function(){
				tip2.innerText = "密码的长度要在6-10之间";
				tip2.style.color = "red";
			}
			
			//需求2:输入完成之后,要判断账号是否符合格式.
			//思路:失去焦点之后判断.
			password.onblur = function(){
				var password123 = password.value; 
				if (password123.length >=6  && password123.length<=10) {
					tip2.innerText = "√";
					tip2.style.color = "green";
				} else{
					tip2.innerText = "X";
					tip2.style.color = "red";
				}
			}
			
			
			
			//onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交  return false就表示不提交
			f.onsubmit = function(){
				
				if(tip1.innerText=="√"  && tip2.innerText=="√" ){
					return true;
				}else{
					alert("请按照要求写");
					return false;
				}
			}
			
			
		</script>

下拉菜单

<body>
		<select id="a">
			<option>中国银行</option>
			<option>建设银行</option>
			<option>交通银行</option>
		</select>
		
		<select id="b">
			<option>中国银行卡号111</option>
			<option>建设银行卡号222</option>
			<option>交通银行卡号333</option>
		</select>
		
		<script>
			// onchange事件: 一般只会作用于下拉框  点击下拉框且改变值.
			//适用场景: 银行卡的互动.  地址栏的联动
			
			var a = document.getElementById("a");
			var b = document.getElementById("b");
			
			
			//需求实现两个下拉框的联动效果.
			//思路:给第一个下拉框加上一个onchange事件
			//思路:获取第一个下拉框的第几个元素(下标)
			//思路:将上一步的思路的下标 赋予给第二个下拉框即可
			a.onchange= function(){
				// 如何获取下拉框的下标
				// console.log(a.selectedIndex);
				b.selectedIndex = a.selectedIndex;
			}
			
			b.onchange= function(){
				// 如何获取下拉框的下标
				// console.log(a.selectedIndex);
				a.selectedIndex = b.selectedIndex;
			}
		</script>
		
		
	</body>

软件2201谢佩霖
关注
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1517
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript DOM API的使用
trong_ 的烂笔头
03-08 3330
JavaScript主要由ECMAScriptDOMBOM这三部分组成;我们要知道要完成一个程序, 光有语法是远远不够的, 对于JS来说, 除JS语法(ES)外, 还需要掌握一些WebAPI, 这些API是浏览器给JS代码提供的功能, 即DOM和BOM;DOM是页面文档对象模型, 可以对页面中的元素进行操作, 而BOM是浏览器对象模型, 可以对浏览器窗口进行操作, 本篇博客中主要介绍的就是DOM.
javascript DOM、事件、事件流、节点操作、元素属性（笔记）
weixin_60547084的博客
02-16 1847
文章目录1. 认识DOM2. 获取元素2.1 通过标签名获取2.2 通过ID获取2.3 通过类名获取2.4 H5新增的获取方式2.5 特殊元素的获取3. 事件3.1 事件三要素3.2 事件类型3.3 注册事件3.4 删除事件3.5 事件流3.6 鼠标事件对象3.7 键盘事件对象3.8 事件委托(事件代理)4. 元素自定义属性4.1 默认的自定义属性4.2 h5新增的自定义属性5. 节点操作5.1 节点类型5.2 获取父元素5.3 获取子元素5.4 获取兄弟元素5.5 添加节点对象5.6 删除节点5.7 克隆
JavaScript WebAPI、DOM、事件、操作元素
YuLong的博客
06-07 741
文章目录WebAPIDOMDOM树DOM获取元素方式document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性案例：显示隐藏密码案例操作元素样式案例：循环精灵图案例：密码框验证信息 WebAPI API：应用程序编程接口，是一些预先定义的函数，由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可 简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 WebAPI：主要针对浏览器的A
JavaScript进阶-WebAPI（DOM节点操作）
ZZP的博客
04-18 394
文章目录二、JavaScript进阶-WebAPIDOM节点操作获取节点增加节点删除节点拓展-时间对象 二、JavaScript进阶-WebAPI DOM节点操作 获取节点 本质: 针对标签本身的增删查 父级: parentNode 子集: children 伪数组 兄弟： 　　nextElementSibling 下一个兄弟 　　previousElementSibling 上一个兄弟 增加节点 方法一： 　　创建新节点 　　　　let result = document.createElem
【JavaScript】——DOM的API基础详解
weixin_51574797的博客
06-12 686
介绍了JavaScript的DOM的api，获取元素：querySelector，querySelectorall 操作元素，修改元素的内容，属性，样式属性，表单属性，操作节点：新增节点，删除节点
JavaScript之DOM操作获取元素、事件、操作元素、节点操作
weixin_53155105的博客
08-07 2740
什么是 DOM？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node.
WebApi入门第六章（ DOM节点 ）
2401_85123638的博客
07-04 428
前端字节跳动真题解析[外链图片转存中…(img-4V8o2CeB-1720108391977)]
Javascript操作DOM常用API总结
2401_83641443的博客
03-29 1046
（2）nodeName为元素标签名，tagName也是返回标签名（3）nodeValue为null（4）parentNode可能是Document或Element（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReferenceText表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：（1）nodeType为3（2）nodeName为#text（3）n
JavaScript DOM及其操作（获取节点方法）
modao的博客
06-08 223
本文主要介绍原生js 中 DOM节点的获取方法。
Javascript & DHTML DOM基础和基本API第1/5页
10-30
JavaScript 和 DHTML DOM 基础及API是Web开发中的核心概念，特别是对于动态网页设计而言。DOM（Document Object Model）是一种国际标准，由W3C（万维网联盟）制定，它为HTML和XML文档提供了一个结构化的表示，并定义...
【Web API DOM11】节点操作
06-06
DOM1是DOM标准的第一个版本，它定义了如何通过JavaScript等脚本语言操作网页内容。在本教程“Web API DOM11”中，我们将深入探讨如何利用DOM1进行节点操作，从而动态地修改、添加或删除网页内容。 首先，了解DOM的...
第06章 DOM节点操作（上）
08-11
在本章“第06章 DOM节点操作（上）”中，我们将深入探讨Document Object Model（DOM）在JavaScript中的应用，以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准，它允许编程语言与网页内容...
javascript 常用DomAPI总结
07-28
本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称，只读。 - **Node.nodeType**: 返回节点类型的常数值，...
前端 js 处理一个数组 展示成层级下拉样式
lzfengquan的博客
10-17 285
前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。
JS-常用功能
最新发布
qq_40950398的博客
10-18 246
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 768
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 829
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 958
请联系我获取更详细的演示视频。
深入理解JavaScript DOMDocument对象与节点操作
"这篇文档主要介绍了JavaScript中的节点操作和DOMDocument对象的重要属性及方法，强调了在使用过程中注意大小写的准确性。DOMDocument是处理XML文档的核心对象，而XMLHTTP则是进行异步请求的关键组件。" 在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值