快速学习JavaScript的BOM和DOM

最新推荐文章于 2025-02-17 01:00:13 发布

thisouou

最新推荐文章于 2025-02-17 01:00:13 发布

阅读量249

点赞数

分类专栏： Java Web 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ouqianbei/article/details/107756125

版权

Java Web 专栏收录该内容

39 篇文章

订阅专栏

文章目录

BOM

概念

什么是BOM?
BOM(Browser Object Model)称为浏览器对象模型

组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

Window：窗口对象

Window对象是不用创建的；可以直接调用其方法；调用方法是可以省略Window；将方法简单分下类

与弹出框有关的方法

方法名	说明
alert()	显示带有一段消息和一个确认按钮的警告框
`confirm()`	显示带有一段消息以及确认按钮和取消按钮的对话框；`点击确认返回true；反之`
prompt()	显示可提示用户输入的对话框；`返回用户输入的值`

代码实现

		alert("弹出警告提示框");

		var flag =  confirm("确认取消对话框");
		if(flag){
			document.write("你点击了确定");
		}else{
			document.write("你点击了取消")
		}

		var result = prompt("请输入你的信息");
		document.write(result);

打开和关闭窗口的方法

方法名	说明
open()	打开一个新的浏览器窗口；返回一个新的Window对象
close()	关闭一个浏览器窗口；谁调用就关闭谁

代码实现

		var openBtn = document.getElementById('open');	//获取按钮的id值
		var closeBtn = document.getElementById('close');
		openBtn.onclick = function() {	//给按钮添加一个点击事件
			new1 = open();	//打开一个新的窗口
		}
		closeBtn.onclick = function() {
			new1.close();	//关闭new1窗口
		}

与定时器有关的方法

定时器可以分为两组；第一组是只执行一次；

方法名	说明
setTimeout()	在指定的毫秒数后调用调用函数或计算表达式；返回一个唯一标识用于取消定时器
clearTimeout()	取消由setTimeout()方法设置的timeout

第二组是循环执行的。

方法名	说明
setInterval()	按照指定的周期来调用函数或计算表达式
clearInterval()	取消由setInterval()设置的timeout

轮播图的实现就是用了此方法；代码实现如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>轮播图的实现</title>
	</head>
	<body>
		<img id="banner" src="img/banner_1.jpg" width="100%">
		<script>
			var number = 1;

			function changeImg() {
				number++;
				if (number > 3) {
					number = 1;
				}
				document.getElementById("banner").src = "img/banner_" + number + ".jpg"; //src语句的拼接
			}

			setInterval(changeImg, 4000); //第一个参数为方法名；第二个是毫秒数
		</script>
	</body>
</html>

Window对象的属性

Window对象的属性可以获取其他BOM对象；
例如：

history
location
Navigator
Screen

Location：地址栏对象

location对象同样也是可以省略window.；直接使用location
主要用的是它的属性href；通过修改href就可以跳转到任意网页位置
其中有一个reload()方法等同于刷新当前页面

代码示范

		var goto = document.getElementById('goto');	//获取goto按钮
		goto.onclick = function() {	//添加一个事件
			location.href = "https://www.baidu.com";	//设置URL
		}

效果是点击页面上的goto按钮就会跳到百度页面

结合上述的计时器方法就可以实现自动跳转到指定页面的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>如何自动跳转首页</title>
	</head>
	<style type="text/css">
		p {
			text-align: center;
		}

		#time {
			color: #FF0000;
		}
	</style>
	<body>
		<p>
			<span id="time">
				10
			</span>秒后自动跳转...
		</p>
		<script type="text/javascript">
			var time = document.getElementById('time');	//获取秒数
			var second = 10;	//定义一个时间变量

			function fun() {
				second--;
				time.innerHTML = second;	//修改页面的时间
				if (second <= 0) {
					location.href = "https://www.baidu.com";
				}
			}
			setInterval(fun, 1000);
		</script>
	</body>
</html>

在这里插入图片描述
History：历史记录对象

历史记录对象同样可以window.history使用；也可以直接history使用

方法名	说明
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go(参数)	加载 history 列表中的某个具体页面。

属性：length；返回当前窗口历史列表中的URL数量

DOM

概念

DOM(Document Object Model)称为文档对象模型；实质是将标记语言文档的各个组成部分封装成对象；然后进行增删改查操作

W3C DOM 标准被分为3个不同的部分；分别是：

核心DOM
XML DOM
HTML DOM

核心DOM模型

Document：文档对象

直接使用document.

获取Element对象的方法

方法名	说明
getElementById()	根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()	根据元素名称获取元素`对象们`。返回值是一个数组
getElementsByClassName()	根据Class属性值获取元素`对象们`。返回值是一个数组
getElementsByName()	根据name属性值获取元素`对象们`。返回值是一个数组

创建其他DOM对象

方法名	说明
createElement()	创建一个标签或元素
createTextNode()	创建文本节点内容

Element：元素对象

获取和创建：通过document调用上述方法来获取和创建
其方法

方法名	说明
removeAttribute()	删除属性
setAttribute()	设置属性

Node：节点对象

节点对象有一个特点就是所有DOM对象都可以被认为是一个节点；但是文本节点对象不能再调用removeChild()不然会报错

其方法就是典型的增删改

方法名	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点。
removeChild()	删除（并返回）当前节点的指定子节点。
replaceChild()	用新节点替换一个子节点。

属性：parentNode 返回节点的父节点；删除节点时就是常用到parentNode属性以实现父删子操作

HTML DOM

就是直接使用innerHTML实现对标签体的设置和获取；好处就是简化了代码

关于控制元素样式

控制元素样式有两种方法：

第一种使用元素的style属性来设置；
第二种是提前定义好类选择器样式然后通过元素的className属性来设置其class值

第一种需要注意的例如

	font-size--> fontSize	
	div1.style.fontSize = "20px";

控制样式的代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制样式</title>
		<style type="text/css">
			.color {	//提前定义好类选择器样式
				background-color: #A6A6A6;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			div
		</div>
		<script type="text/javascript">
			var div1 = document.getElementById('div1');

			div1.innerHTML += "new" //实现文本的添加

			div1.onclick = function() {
				div1.style.border = "1px solid red";
			}
			div1.className = "color"; //通过元素的className属性来设置其class属性值
		</script>
	</body>
</html>

比较综合的DOM例子；动态学生信息表

先看效果图
在这里插入图片描述
代码的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>动态表格添加</title>
		<style type="text/css">
			body {
				text-align: center;
			}

			table {
				width: 500px;
				margin: auto;
			}

			tr:hover {	//当鼠标移到每一行时背景色就会发生变化
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<input type="text" name="number" id="number" value="" placeholder="请输入编号" />
		<input type="text" name="name" id="name" value="" placeholder="请输入姓名" />
		<input type="text" name="gender" id="gender" value="" placeholder="请输入性别" />
		<input type="button" name="append" id="append" value="添加" />

		<table>
			<caption>学生动态信息表</caption>	//表头
			<tr>
				<th><input type="checkbox" name="cb" id="firstCb" value="" /></th>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr>
				<th><input type="checkbox" name="cb" id="" value="" /></th>
				<td>1</td>
				<td>蜘蛛侠</td>
				<td>男</td>
				<td><a href="Javascript:void(0)" onclick="delTr(this)">删除</a></td>	//超链接实现点击事件
			</tr>
		</table>
		<input type="button" name="selectAll" id="selectAll" value="全选" />
		<input type="button" name="unSelectAll" id="unSelectAll" value="全不选" />
		<input type="button" name="selectRev" id="selectRev" value="反选" />
		<script type="text/javascript">
			document.getElementById('append').onclick = function() { //点击添加的方法
				var number = document.getElementById('number').value;	//获取文本值；下同
				var name = document.getElementById('name').value;
				var gender = document.getElementById('gender').value;

				var td_checkbox = document.createElement("td");	//创建一个单元格元素
				var ele_input = document.createElement("input");	//创建标签
				ele_input.setAttribute("type", "checkbox");	//设置属性
				ele_input.setAttribute("name", "cb");	//设置属性
				td_checkbox.appendChild(ele_input);	//父节点添加子节点



				var td_id = document.createElement("td");
				var text_id = document.createTextNode(number);
				td_id.appendChild(text_id);

				var td_name = document.createElement("td");
				var text_name = document.createTextNode(name);
				td_name.appendChild(text_name);

				var td_gender = document.createElement("td");
				var text_gender = document.createTextNode(gender);
				td_gender.appendChild(text_gender);

				var td_a = document.createElement("td");
				var ele_a = document.createElement("a");
				ele_a.setAttribute("href", "javascript:void(0)")
				ele_a.setAttribute("onclick", "delTr(this)")
				var text_a = document.createTextNode("删除");
				td_a.appendChild(ele_a);
				ele_a.appendChild(text_a);

				var tr = document.createElement("tr");
				tr.appendChild(td_checkbox);
				tr.appendChild(td_id);
				tr.appendChild(td_name);
				tr.appendChild(td_gender);
				tr.appendChild(td_a);
				document.getElementsByTagName("table")[0].appendChild(tr)
			}

			function delTr(obj) { //删除操作的实现
				var table = obj.parentNode.parentNode.parentNode;
				var tr = obj.parentNode.parentNode;
				table.removeChild(tr);
			}

			document.getElementById("selectAll").onclick = function() { //全选
				var cbs = document.getElementsByName("cb");
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = true;
				}
			}
			document.getElementById("unSelectAll").onclick = function() { //反选
				var cbs = document.getElementsByName("cb");
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = false;
				}
			}
			document.getElementById("selectRev").onclick = function() { //反选
				var cbs = document.getElementsByName("cb");
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = !cbs[i].checked;
				}
			}
			document.getElementById("firstCb").onclick = function() { //第一个方框
				var cbs = document.getElementsByName("cb");
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = this.checked;
				}
			}
		</script>
	</body>
</html>

这里值得注意的是要想超链接a标签实现点击事件可以将href设置为javascript:void(0)

常见的事件

点击事件

方法名	说明
onclick	单击事件
ondbclick	双击事件

焦点事件；该类事件常用语表单的验证

方法名	说明
onblur	失去焦点
onfocus	元素获得焦点

加载事件；也就是当页面加载完毕时才会执行

方法名	说明
onload	一个页面或一幅图像完成加载

鼠标事件；

方法名	说明
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。

键盘事件

方法名	事件
onkeydown	某个键盘按键被按下。
onkeyup	某个键盘按键被松开。
onkeypress	某个键盘按键被按下并松开。

这里注意一点是事件的执行都是有一个event对象的就例如；event对象可以调用键盘或鼠标的属性

		document.getElementById('username').onkeydown = function(event){
			if(event.keyCode ==13){	//可以借助回车完成提交表单
				alert("我按下了回车")
			}

选择和改变事件；该事件常用与省份的三级联动

方法名	说明
onchange	域的内容被改变。
onselect	文本被选中。

表单事件；用于表单的验证；比较重要

方法名	说明
onsubmit	确认按钮被点击。
onreset	重置按钮被点击。

要注意的是要想拥有表单验证效果必须要有返回布尔值；否则无论什么情况都会被提交的
正确的用法例如

		document.getElementById('form').onsubmit() = function(){
			var flag = true ;
			.
			.
			.
			return flag; 	//当flag的值为flase时就会被阻止提交；反之
		}

CET4P254

lover
hopeless
identical
preceding
forge
wolf
wool
connection
workshop
scream
sacrifice
possession