JavaScript的DOM和BOM编程

最新推荐文章于 2022-03-19 13:18:37 发布
最新推荐文章于 2022-03-19 13:18:37 发布
阅读量367 收藏 1
点赞数
分类专栏： Java前端 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eternal_yangyun/article/details/103139344
版权

文章目录

本片博客总结一下最近学习的JavaScript的DOM编程，这是JavaScript中比较重要的一个模块！

1. BOM编程（了解学习）

BOM编程需要了解如下四个对象：

js引擎在解析html页面的时候，将html页面主要分为以下四个对象：

1. 窗口对象：window

窗口对象：window ，所有BOM编程的顶级对象

  • 如打开资源文件的方法：open（）；
  • 定时器相关的方法；
  • 和弹框相关的方法： ⭐
    • alert（“消息对话框”）：弹出的框框只有确定按钮
    • confirm（”确认提示框“）：弹出的框框有确定和取消两种按钮
    • prompt（”输入提示“）：弹出的框框有个文本输入框，可以进行文本输入，下面有个确认按钮；

2. 地址栏对象：location

  • href属性：更改页面地址（页面跳转）⭐

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn() {
				//执行下面就会跳转到#.html页面
				window.location.href = "#.html";
			}
		</script>
	</head>
	
	<body>
		<button onclick="btn()">执行跳转</button>
	</body>
</html>

  • reload（）方法 ：刷新当前页面；

3. 历史记录对象：history

  • back：从历史列表中装入前一个URL （回退到上一个页面）

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btnBack() {
				//回退到上一个url
				window.history.back();
			}
		</script>
	</head>
	
	<body>
		<button onclick="btnBack()">回退</button>
	</body>
</html>

  • forward：从历史列表中装入下一个URL （即加载下一个页面，前进操作）

  • go：从历史列表中装入URL （到达指定页面）

4. 屏幕对象：screen

一些关于屏幕参数的属性和方法，不用深入了解；

2. DOM编程

1. DOM编程入门

先来看这样一个html页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<button>按钮</button>
		<input type="text"/>
	</body>
</html>

运行得到下面的结果：
在这里插入图片描述

浏览器内置的JavaScript解析器将html页面解析的时候，将每一个标签封装成对象（节点对象），从文档开始到文档结束（树状结构），就叫DOM；

我们分析上面的源码，大致可以形成下面这个树状结构：
在这里插入图片描述

DOM编程的使用步骤：

  • （1）：通过特定方法/特定属性控制标签对象；
  • （2）：通过标签对象更改标签里面属性或者样式，展示效果（通过业务）

2. 获取标签对象的三种方式

有3种方式来获取标签对象：

1. document集合属性来获取标签对象

document集合属性来获取标签对象（all属性）————了解这一种方式即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	
	<body>
		<form>
			<img src="#" />
			<a href="#"></a>
		</form>
	</body>
	<script>
		var nodeList = document.all;
		for(var i=0; i<nodeList.length; i++) {
            //输出每个标签对象的名字
			document.write(nodeList[i].nodeName+"  ");
		}
	</script>
</html>

网页输出：
HTML HEAD META TITLE BODY FORM IMG A SCRIPT

可以看到自上而下的输出了所有的标签对象；

2. 查询节点关系来获取标签对象

每个节点对象都有如下属性： （通过这些属性可以遍历整个节点树了嘛！）

  • parentNode：父节点
  • childNodes：所有的子节点
  • firstChild：第一个子节点
  • lastChild：最后一个子节点
  • nextSibling：下一个兄弟节点
  • previousSibling：上一个兄弟节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	
	<body>
		<form>
			<img src="#" />
			<a href="#"></a>
		</form>
	</body>
	<script>
	//下面这个获取到的节点对象是A标签对象，也就是最内层的那个标签对象
		var aNode = document.links[0];
		document.write(aNode.nodeName+"   ");
		//获取第一个子节点
		document.write(aNode.parentNode.nodeName);
	</script>
</html>

**网页输出：**A FORM

3. 通过document对象的方法获取⭐（最常用）

下面四种方法中前两种最常用；

  • getElementById（“id属性值”）：通过id属性值获取
    （特点：id属性值在当前html一定是唯一的）
  • getElementsByClassName（“class属性值”）：通过class属性值获取标签对象，返回标签对象列表
  • getElementsByName（“name属性值”）：通过name属性获取标签对象
  • getElementsByTagName（“标签名称”）：通过标签名称获取

这里举个例子： （用的第一种方式来获取标签对象，其他几种就不再举例了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function textBlur() {
			//通过id属性获取标签对象
			var userName = document.getElementById("user");
			alert(userName.value);
		}
	</script>
	
	<body>
		<!--失去焦点事件：onblur，就是你的鼠标离开这个input标签的时候就会调用后面指定的js函数-->
		用户名:<input id="user" type="text" onblur="textBlur()" />
	</body>
</html>

网页输出：
这里我就不截图了，直接描述，当我运行后，会产生一个文本框，鼠标点击文本框进行输入，鼠标一旦离开这个文本框，就会弹窗提示，提示内容就是你在文本框输入的内容；

3. js的事件编程

在Java中也有事件编程，为GUI编程，但现在已经被淘汰了

事件编程三要素：

  • （1）：确定事件源： 确定标签
  • （2）：事件监听器： 编写事件函数（业务处理）
  • （3）：绑定/注册事件监听 ：通过特定事件把函数进行绑定
1. 事件基础案例

下面来看个栗子： （对应的解释在注释中哟）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		//这个函数就是事件监听器
		function btnClick(){
			alert("已点击");
		}
	</script>
	
	<body>
		<!--button就是事件源-->
		<button onclick="btnClick()">点我</button>
	</body>
</html>
2. 常用事件分类 ⭐

（1）：按键抬起事件
应用场景：模拟百度搜索

（2）：点击相关事件

  • onclick：单击
  • ondbclick：双击

（3）：焦点相关事件

  • onfocus：获取焦点（也就是一个input标签，我鼠标进入那个输入框并点击后就会触发对应函数）

  • onblur：失去焦点 ⭐
    下面看一个栗子：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		//这个函数就是事件监听器
		function obr(){
			var name = document.getElementById("name").value; 
			var span = document.getElementById("span_Tip");
			
			if(name != "Bob") { //这是原生做法，后面用正则表达式验证
				span.innerHTML = "用户名可用".fontcolor("greeyellow");
			}else {
				span.innerHTML = "用户名不可用".fontcolor("red");
			}
		}
	</script>
	
	<body>
		用户名: <input id="name" type="text" onblur="obr()" />
		<span id="span_Tip"></span> <br />
	</body>
</html>

    运行后的结果： （文字描述）
    会产生一个输入框，如果我输入的不是Bob，当我鼠标离开文本框并点击一下时，就会在文本框后面输出绿色的“用户名可用”字样，如果输入的是Bob，当鼠标随便点击文本框以外的区域，就会在文本框后面输出红色的“用户名不可用”；

（4）：选项卡发生变动事件

  • onchange
    • 栗子：省市联动

（5）鼠标相关的事件

  • onmouseover：鼠标经过事件

  • onmouseout：鼠标移出事件
    下面看这个栗子：
    先来创建一个块标签，并用CSS修饰它；

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 200px;                /*指定宽度*/
				height: 200px;           	 /*指定高度*/
				border: 1px solid #FF0000;   /*指定边框大小*/
			}
		</style>
	</head>
	<script>
		function mouseOver(){
			alert("鼠标经过了这个快标签！！！");
		}
	</script>

	<body>
		<div id="div1" onmouseover="mouseOver()">
			里面的内容
		</div>
	</body>
</html>

    输出：
    在这里插入图片描述

    当我鼠标滑过那个div的时候，就会弹出上面的提示框；

（6）：页面载入事件

  • 一般在body后面指定onload事件，将body中的内容全部加载完毕再去执行函数onload；

4. js正则表达式介绍

通过一些特定字符校验用户输入的字符串是否符合正则表达式规则；

什么是正则表达式：
通过一些特定字符校验用户输入的字符串是否符合正则规则；

应用场景：登陆/注册

数量词：

  • X+：X字符出现一次或多次（常用）；
  • X*：X字符出现0次或多次；
  • X？：X字符出现0次或一次；

[a-zA-Z0-9]：当前字符不区分大小写，并且还可以是数字；
[a-zA-Z]：只能是字母，不区分大小写；
X{n}：X字符恰好出现n次；
X{n，}：X字符至少n次；

正则表达式格式： ⭐

var 变量名 = /正则语法/；

使用栗子：

	<script>
		var str = 23;
		var reg = /[0-9]{2}/;   //至少出现两个数字
		if(reg.test(str)) {
			alert("条件成立");
		}else {
			alert("不成立");
		}
	</script>

输出： （语言描述）
运行后网页弹出框：条件成立；

如果要让你要匹配的字符串规定以什么开头或者以什么结尾，正则表达式可以这样写：

		var str = "A35";
		var reg = /A[0-9]{2}B/;   //至少出现两个数字

上面就代表必须以A开头，B结尾；

5. 原生的js表单验证⭐

这里直接上代码，代码中请看注释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		/*
		 * 正则规则制定：
		 * 1. 用户名满足4~14位的数字或者字母组成
		 * 2. 密码满足6~16位的数字或者字母组成
		 * 3. 确认密码和密码必须一致
		 * 4. 邮箱格式：数字或字母@数字或字母（.com/.cn/.com.cn...）
		 */
		function checkUserName() {
			//第一步就是获取用户名的标签对象
			var username = document.getElementById("username").value;
			//获取后面的span标签对象
			var userTip = document.getElementById("user_tip");
			var reg = /^[a-zA-Z0-9]{4,14}$/;
			if(reg.test(username)) {
				//校验成功，则设置span标签的属性
				userTip.innerHTML = "用户名格式正确".fontcolor("greenyellow");
				return true;
			}else {
				userTip.innerHTML = "用户名格式错误".fontcolor("red");
				return false;
			}
		}
		
		function checkPwd() {
			var password = document.getElementById("password").value;
			//获取后面的span标签对象
			var userTip = document.getElementById("pwd_tip");
			var reg = /^[a-zA-Z0-9]{6,16}$/;
			if(reg.test(password)) {
				//校验成功，则设置span标签的属性
				userTip.innerHTML = "密码格式正确".fontcolor("greenyellow");
				return true;
			}else {
				userTip.innerHTML = "密码格式错误".fontcolor("red");
				return false;
			}
		}
		
		function checkRePwd() {
			var password = document.getElementById("password").value;
			var rePwd = document.getElementById("repwd").value;
			var rePwdTip = document.getElementById("repwd_tip");
			if(password == rePwd) {
				rePwdTip.innerHTML = "两次输入的密码一致".fontcolor("greenyellow");
				return true;
			}else {
				rePwdTip.innerHTML = "两次输入的密码不一致".fontcolor("red");
				return false;
			}
		}
		
		function checkEmail() {
			var email = document.getElementById("email");
			var emailTip = document.getElementById("email_tip");
			var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/
			if(reg.test(email)) {
				emailTip.innerHTML = "邮箱格式正确".fontcolor("greenyellow");
				return true;
			}else {
				emailTip.innerHTML = "邮箱格式错误".fontcolor("red");
				return false;
			}
		}
		
		//这个函数就是onsubmit事件的事件监听器，用来验证所有的；
		function checkAll() {
			if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()) {
				return true;
			}else {
				return false;
			}
		}
		
	</script>

	<body>
		<!--在from中有一个表单提交事件
			onsubmit：整个表单中的信息如果都满足条件才能成功，否则不能提交，不能提交就是
			点击提交按钮没有反应，不会跳转到后台；
			⭐这个有返回值，所以不要忘了写return⭐
		-->
		<form action="backed.html" method="post" onsubmit="return checkAll()">
			用户名:<input type="text" id="username" onblur="checkUserName()"/> <span id="user_tip"></span>
			<br />
			密&nbsp;&nbsp;&nbsp;码:<input type="password" id="password" onblur="checkPwd()"/> <span id="pwd_tip"></span>
			<br />
			确认密码:<input type="password" id="repwd" onblur="checkRePwd()"/> <span id="repwd_tip"></span>
			<br />
			邮&nbsp;&nbsp;&nbsp;箱:<input type="text" id="email" onblur="checkEmail()"/> <span id="email_tip"></span>
			<br />
			<input type="submit" value="注册" /> &nbsp;&nbsp; <input type="reset" value="重置" />
		</form>
	</body>
</html>

输出：
在这里插入图片描述

邮箱格式有误，所以点击提交没有反应；
点击重置，所有都会清空；

Eternal_yys
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于JavaScript的DOM和BOM简单案例
AtlantisChina
10-12 661
使用JavaScript来实现电灯开关、轮播图、自动跳转首页、动态表格、表格选择、表单验证等案例效果。
JavaScript_2_DOM和BOM1
08-04
JavaScript DOM 和 BOM JavaScript 的 DOM（Document Object Model）和 BOM（Browser Object Model）是两种不同的对象模型，它们都是 JavaScript 语言的核心组件。DOM 是一种编程接口，用于访问和操作 HTML 文档中...
前端---JavaScript基础+DOM编程与BOM编程
04-09 323
的
JavaScript编程之BOM和DOM
qq_2604939074的博客
08-28 92
JavaScript编程之BOM编程篇 w3c网站有介绍 windos对象的介绍： 使用window对象弹框，可以实现三种方式 //1.警告框，不同浏览器弹不同的框 //alert(); alert("aaaa") //2.消息确认框 const b = window.confirm("是否确认删除"); console.log("确认删除的结果："+b) // 3. 消息输入框 let age
JavaScript之BOM编程&&事件编程
自在强博客
01-15 369
**Bom：浏览器对象模型 浏览器在加载HTML文件时，JavaScript引擎会把浏览器的各个部分的信息封装到对象中，浏览器 会分为以下几个对象 窗口： windows对象 地址栏： location对象 历史记录栏： history对象 屏幕 screen对象 通过JavaScript引擎提供给这个四个对象来操作浏览器，就是Bom编程 **有哪些
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript之彻底搞懂DOM与BOM及其区别与用法
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
javascript DOM 编程艺术
02-25
以上内容揭示了JavaScript DOM编程艺术这本书的广度和深度，为读者提供了一条全面了解和掌握JavaScript及其在Web开发中应用的路径。通过学习这些知识点，开发者能够构建出更强大、更交互性强的Web应用程序。
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
10-27
3. JavaScript：是一种轻量级的解释型编程语言，常用于网页和网络应用。JavaScript在DHTML中的作用是赋予网页动态行为，通过操作DOM（Document Object Model）来改变HTML元素的属性和样式。 JavaScript由三部分组成...
javascript bom是什么及bom和dom的区别
11-22
总的来说，BOM和DOM都是JavaScript在Web开发中不可或缺的部分，BOM用于浏览器环境下的交互和控制，而DOM则是处理和操作页面内容的关键工具。理解并熟练运用这两个模型，是成为一个合格的前端开发者所必需的技能。
JavaScript+DOM编程艺术
05-21
JavaScript+DOM编程艺术是关于网页动态化和交互性开发的重要指南。JavaScript，作为一种广泛应用于Web开发的脚本语言，是实现网页动态效果和用户交互的关键。DOM（Document Object Model）则是HTML和XML文档的一种...
HTML BOM（部分）
qq_41135704的博客
08-08 1758
Window对象 Window 对象属性 Window 对象方法 1. alert()及confirm() 3. setInterval()及clearInterval() 实现图片轮播以及停止 5. setTimeout() 6.clearTimeout() setInterval()与setTimeout()的区别 window对象的属性和方法为JavaScript全局变量和全局函数，...
大学生创业计划书(11)三篇文件.docx
07-11
大学生创业计划书(11)三篇文件.docx
大学生创业计划书(9)三篇文件.docx
07-11
大学生创业计划书(9)三篇文件.docx
清华大学美术学院论文答辩演讲PPT模板
07-11
【作品名称】：清华大学美术学院论文答辩演讲PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
大学生创业计划书(17)三套材料.docx
07-11
大学生创业计划书(17)三套材料.docx
BW365_EN_Col62.pdf
07-11
BW365_EN_Col62
时尚风格论文答辩PPT模板
07-11
【作品名称】：时尚风格论文答辩PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
议题：如何进行bom断阶，编码指标树一组 (1).xlsx
最新发布
07-11
议题：如何进行bom断阶，编码指标树一组 (1)
JS-ECMAScript.docx
04-17
JavaScript由ECMAScript（国际标准）、DOM（文档对象模型）和BOM（浏览器对象模型）三部分组成。 ECMAScript是JavaScript的核心，是一种由Ecma国际组织标准化的脚本语言规范。它定义了JavaScript的语法、基本数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值