5、JS-BOM和DOM

辛勤小王子

已于 2022-08-15 17:11:54 修改

阅读量185

点赞数

分类专栏： # Java Web应用开发基础教学文章标签： javascript 前端开发语言

于 2022-08-14 23:30:55 首次发布

本文链接：https://blog.csdn.net/qq_37917691/article/details/126338234

版权

教学同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Java Web应用开发基础

15 篇文章 0 订阅

订阅专栏

一、BOM:Browser object model

•BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框alert()，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！

•window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。JavaScript中的任何一个全局函数或变量都是window的属性

在这里插入图片描述

1、screen对象（屏幕）

screen对象包含有关用户屏幕的信息

•每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

在这里插入图片描述

document.write("width:"+window.screen.width+"<br/>");
document.write("height:"+window.screen.height+"<br/>");
document.write("avaiWidth:"+window.screen.availWidth+"<br/>");
document.write("avaiHeight:"+window.screen.availHeight+"<br/>");
document.write("colorDepth:"+window.screen.colorDepth);

2、navigator对象（浏览器）

•navigator 对象包含有关访问者浏览器的信息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-omAdzMdx-1660490503118)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811062724460.png)]$

document.write("appCodeName:"+navigator.appCodeName+"<br/>");
document.write("appName:"+navigator.appName+"<br/>");
document.write("appVersion:"+navigator.appVersion+"<br/>");
document.write("browserLanguage:"+navigator.browserLanguage+"<br/>");
document.write("cookieEnabled:"+navigator.cookieEnabled+"<br/>");
document.write("platform:"+navigator.platform+"<br/>");
document.write("userAgent:"+navigator.userAgent+"<br/>");
document.write("userLanguage:"+navigator.userLanguage+"<br/>");

“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

可以不带window前缀写

3、window对象

•所有浏览器都支持 window 对象。它表示浏览器窗口。

•所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

–全局变量是 window 对象的属性。

–全局函数是 window 对象的方法。

–甚至 HTML DOM 的 document 也是 window 对象的属性之一：

•window.document.getElementById(“header”);

•与此相同：

•document.getElementById(“header”);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hJh8iZ1-1660490503121)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811062824409.png)]$

window.document.write("screenLeft："+window.screenLeft);

在这里插入图片描述

<script type="text/javascript">
			//document.write("innerHeight:"+window.innerHeight+"<br/>");
			//document.write("innerWidth:"+window.innerWidth+"<br/>");
			//document.write("name:"+window.name+"<br/>");
			//document.write("outerHeight:"+window.outerHeight+"<br/>");
			//document.write("outerWidth:"+window.outerWidth+"<br/>");
			//if(confirm("请选择！！！")){
				//document.write("点击了确定按钮");
			//}else{
				//document.write("点击了取消按钮");
			//}
			
			var imgIndex = 1;
			var timeInterval = setInterval(myTimer,1000);
			var backgroundChange = setInterval(changeBgColor,100);
			var changeDivImg = setInterval(changeDivImg,500);
			
			function changeDivImg(){
				var imgUrl="url('../imgs/"+imgIndex+".jpg')"; 
				document.getElementById("imgDiv").style.backgroundImage=imgUrl;
				if(imgIndex<4){
					imgIndex++;
				}else{
					imgIndex = 1
				}
				
			}
			
			function changeBgColor(){
				document.getElementById("div1").style.backgroundColor = 
				document.getElementById("div1").style.backgroundColor=="yellow"?"green":"yellow";
			}
			function moveWin(){
				myWin.moveBy(250,250);
				myWin.focus();
			}
			
			function openWin(){
				myWin = window.open('','','width=200,height=100');
			}
			
			function moveWin2(){
				myWin.moveTo(0,0);
				myWin.focus();
			}
			
			function myPrint(){
				window.print();
			}
			
			function resizeWindow(){
				window.resizeBy(100,100);
			}
			
			function interval1(){
				setInterval("alert('hello')",3000);
			}
			
			function myTimer(){
				var time = new Date().toLocaleTimeString();
				document.getElementById("myTime").innerHTML=time;
			}
			
			function stopTime(){
				clearInterval(timeInterval);
			}
			
			function openWinAfter3(){
				setTimeout("alert('三秒到了！！！')",3000);
			}
		</script>
	</head>
	
	<body>
		<button onclick="openWin();">打开一个窗口</button>
		<button onclick="moveWin();">移动窗口</button>
		<button onclick="moveWin2();">移动窗口到左上角</button>
		<button onclick="myPrint();">打印</button>
		<button onclick="resizeWindow();">调整窗口大小</button>
		<br/>
		<button onclick="interval1();">每三秒弹窗</button>
		<h1 id="myTime"></h1>
		<button onclick="stopTime();">停止时间</button>
		<div style="width:200px;height:200px;background-color:yellow;" id="div1"></div>
		<div id="imgDiv" style="width:300px;height:300px;background-image:url(../imgs/1.jpg)"></div>
		
		<button onclick="openWinAfter3();">三秒之后弹出</button>
	</body>

4、history对象(历史)

•history 对象包含浏览器的历史

•History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-av3KQRk5-1660490503126)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811063007719.png)]$

<script type="text/javascript">
	document.write("历史列表中的网址数量："+history.length);
</script>

5、location对象

location 对象用于获得当前页面的地址•(URL)，并把浏览器重定向到新的页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1sAqycZw-1660490503127)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811063108348.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LPasNowv-1660490503128)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811063139064.png)]$

var timeInterval = setInterval(myTimer,1000);
			function openNew(){
				location.href="../lesson1/reg.html";
			}
			
			function openNew2(){
				location.assign("http://www.baidu.com");
			}
			
			function refresh1(){
				location.reload(true);
			}
			
			function myTimer(){
				var time = new Date().toLocaleTimeString();
				document.getElementById("myTime").innerHTML=time;
			}
			
			function replace1(){
				location.replace("http://www.baidu.com");
			}

二、DOM

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48BzmIO3-1660490503129)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811063344399.png)]$

1、节点：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmQprp3l-1660490503130)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210811063836244.png)]$

2、dom常用的方法：

在这里插入图片描述

getElementsByName()

3、使用dom：

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

父、子和同胞节点

我们常用父（parent）、**子（child）和同胞（sibling）**等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

<html>
  <head>
    <meta charset="utf-8">
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 课程1</h1>
    <p>Hello world!</p>
  </body>
</html>

//根节点，父节点
<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

//子节点，同胞节点
<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有两个子节点：<meta> 与 <title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

//首个节点和最后一个节点
<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

//父亲元素
var div1 = document.getElementById("d1");
var chds = div1.childNodes;
chds[1].style.color="red";

chds[1].nextElementSibling.style.backgroundColor="blue";

chds[1].parentNode.style.backgroundColor="green";

创建节点：createElement

添加节点：appendChild

添加节点

//元素节点
var btn = document.createElement("BUTTON");
//文本节点
var text = document.createTextNode("newBtn");
//属性节点
var attr = document.createAttribute("name");
attr.value="btn1";
//添加文本节点
btn.appendChild(text);
//添加属性节点
btn.setAttributeNode(attr);
//添加元素（添加到节点末尾）
document.getElementById("d1").nextElementSibling.appendChild(btn);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:500px;
				height: 300px;
				background-color: aliceblue;
			}
			p{
				background-color: aqua;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<button onclick="add()">add</button>
	</body>
	
	<script type="text/javascript">
	function add(){
		var son = document.createElement("p");
		son.innerHTML="sadfasd";
		document.getElementById("d1").appendChild(son);
	}
		
	</script>
</html>

//插入节点
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Button3");
var attr = document.createAttribute("name");
attr.value="btn3";
btn.appendChild(text);
btn.setAttributeNode(attr);

var div1 = document.getElementById("d1");
var p1 = document.getElementById("p1");
div1.insertBefore(btn,p1);

//删除节点
var div1 = document.getElementById("d1");
var p1 = document.getElementById("p1");
div1.removeChild(p1);

//替换节点
var a = document.createElement("a");
var text = document.createTextNode("替换后的a标签");
var attr = document.createAttribute("style");
attr.value="background-color:yellow";
a.appendChild(text);
a.setAttributeNode(attr);

var div1 = document.getElementById("d1");
var p1 = document.getElementById("p1");

div1.replaceChild(a,p1);

4、常见的dom操作：

设置class属性

.className = “style2”;

设置css样式：

.style.color=“red”;

.style.cssText = "background-color:black; display:block;color:White;

.style[‘border’]=“10px solid #fcfe3f”;

修改外连css表

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAPLSqiO-1660490503131)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210827072445433.png)]$

获取属性：

getAttribute(“style”);

设置属性：

.setAttribute(“class”, “style2”);

删除属性：

.removeAttribute(“class”);

innerHTML,innerText,outerHTML,outerText

5、dom事件：

1、onmouseover 和 onmouseout 事件

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
	obj.innerHTML="Thank You"
}

function mOut(obj)
{
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>

2、onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mClic()" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<p id='msg'></p>
<script>
function mDown(obj)
{
	obj.style.backgroundColor="#1ec5e5";
	obj.innerHTML="Release Me"
}

function mUp(obj)
{
	obj.style.backgroundColor="#D94A38";
	obj.innerHTML="Thank You"
}
	
function mClic(){
	document.getElementById("msg").innerHTML="点击完成";
}
</script>

</body>

首页轮播图：

https://www.cnblogs.com/tyblwmbs/p/10909792.html

https://blog.csdn.net/krysliang/article/details/84632780

辛勤小王子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5、JS-BOM和DOM

例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。•BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框alert()，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！•window对象是BOM中所有对象的核心。.
复制链接

扫一扫

专栏目录