HTML--JavaScript操作BOM对象

liu zhi cheng

已于 2024-07-27 17:34:24 修改

阅读量1.2k

点赞数 35

分类专栏： Web前端文章标签： html javascript 前端

于 2024-07-27 17:31:46 首次发布

本文链接：https://blog.csdn.net/one__piece__/article/details/140738007

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

getElementByld() + innerHTML案例

getElementsByName() +getElementsByTagName()案例

本章要求

了解BOM模型
掌握BOM模型实际应用

一.BOM模型概述

BOM（浏览器对象模型）是JavaScript中的一个重要概念，它提供了一组用于控制浏览器窗口和页面内容的对象和方法。

BOM可实现功能：

弹出新的浏览器窗口移动、
关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

二.BOM核心：window对象

window对象：表示浏览器窗口或框架。它是BOM的顶层对象，包含了浏览器窗口的各种属性和方法，比如窗口大小、位置、打开新窗口等。

常用属性

history 属性

history属性是一个表示浏览器历史记录的对象。通过history属性可以使用JavaScript执行以下操作：返回上一个页面，进入下一个页面，获取历史记录长度等等。

location属性

location属性表示当前文档的URL地址。它提供了访问和操作URL的方法。

通过上述属性实现的功能和浏览器左上角前进，后退，刷新等按钮一致。

案例：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
	margin: 0px auto;
	text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:history.back()">返回主页面</a></p><!--返回上一级页面-->
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a><!--点击重新加载本页面-->
</body>
</html>

常用方法：

针对window对象的常用方法是对浏览器窗口进行一系列操作，例如点击某个按钮关闭，关闭某页面时需要再次确认等等，这些都可以通过下面的常用方法实现。

confirm() 案例

confirm() :显示一个带有提示信息，确定和取消按钮的对话框。

语法

window.confirm("提示信息")

<script type="text/javascript">
			var flag = window.confirm("确认要关闭这个页面嘛？")
			if(flag == true){window.alert("正在关闭页面，请稍后...");}
			else{window.alert("已取消关闭...");}
</script>

open ()+close()案例

open ()：打开一个新的浏览器窗口，加载给定 URL 所指定的文档。

close()：关闭浏览器页面

语法：

window.open("弹出窗口的url")

<body>
		<script type="text/javascript">
			function open_index(){window.open("open.html");}
			function close_index(){window.close();}
		</script>
		<input type="button" value="点击此处调用open函数打开新页面" onclick="open_index()"/>
		<input type="button" value="点击此处关闭页面" onclick="close_index()"/>
</body>

setTimeout( ) 案例

在指定的毫秒数后调用函数或计算表达式。

语法：

window.setTimeout("调用的函数",毫秒数);

案例

<body>
		<p>此页面等待5秒后自动跳转...</p>
		<script type="text/javascript">
			function fun1(){document.write("这是5秒后执行的函数页面");}
			window.setTimeout("fun1()",5000);
		</script>
</body>

setInterval( ) 案例

按照指定的周期（以毫秒计）来调用函数或表达式

语法

window.setInterval("调用的函数",毫秒数);

案例

<body>
		<p>此页面等待3秒后自动跳转...</p>
		<script type="text/javascript">
			function fun1(){document.write("这是3秒后执行的函数页面");}
			window.setInterval("fun1()",3000);
		</script>
</body>

三.Document对象

在JavaScript中，document对象是浏览器提供的用于操作当前页面的工具。document代表了整个HTML文档，对象则代表访问和操作文档中的元素、样式、事件等。

常用属性

通过referrer()：返回含有当前问文档的URL

案例

领奖页面代码

下面的代码中含有 href="praise.html" 即该URL含有奖品显示页面文档，因此当点击超链接跳转时，奖品显示页面会导入领奖页面的URL，此时if 语句中URL不为空，页面将显示

”大奖赶快拿啦！笔记本！数码相机！" 字样。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>领奖页面</title>
    <style type="text/css">
        body,h1{margin: 0;padding: 0;}
        .prize{text-align: center;}
    </style>
</head>
<body>
<div class="prize">
    <img src="images/d1.jpg" alt="中奖" />
    <h1><a href="praise.html">马上去领奖啦！</a></h1>
</div>
</body>
</html>

奖品显示页面代码

直接运行后，未载入本页面文档地址，URL问空，将显示"您不是从领奖页面进入，5秒后将自动跳转到登录页面"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>奖品显示页面</title>
    <style type="text/css">
        body{margin: 0;}
    </style>
</head>
<body>
	<script type="text/javascript">
		var url = document.referrer;  //载入本页面文档的地址（从哪来的）
		if(url == ""){
			document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
			//新技术点(定时函数)
			window.setTimeout("location.href='login.html'",5000);	
		}else{
			document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");
		}
	</script>
</body>
</html>

定时函数跳转页面代码

5s后自动跳转到该页面

 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style type="text/css">
        body{margin: 0;}
    </style>
</head>
<body>
<img src="images/login.jpg" alt="登录图片"/>
</body>
</html>

常用方法

html中通常使用CSS选择器来选中某个标签，而在javascript中通常使用Document对象中的提供的常用方法来选中某一个标签。

getElementByld() + innerHTML案例

getElementByld():用于选中指定id标签中的第一个元素。

.innerHTML:用于将右节点的内容赋值给左节点的内容

语法

#选中当前文文档中标签ID和指定ID相同的标签中的第一个元素
document.getElementById("指定标签id")

change1.innerHTML = "需要赋值的内容";

案例

<body>
		<div id="01">这是未更换之前的文字</div>
		<input type="button" name="change" id="02"/ value="点击此处更换上述文字" onclick="change()">
		<script>
			function change(){
			//此处使用document.getElementById()选中id=01的标签，并将该标签中的第一个元素赋值给change1
				var change1 = document.getElementById("02").value;
				//change1.innerHTML：获取"="号右边的内容，并赋值给change1	
				document.getElementById("01").innerHTML = change1;
			} 
		</script>
</body>

getElementsByName() +getElementsByTagName()案例

getElementsByName() ：选中所有name属性中的内容和指定内容相同的标签。

getElementsByTagName()：选中所有名称和指定内容相同的标签。

案例

<form name="myForm">
  <input type="text" name="firstName">
  <input type="text" name="lastName">
  <input type="submit" value="Submit">
</form>
<script>
   var form = document.getElementsByName("myForm")[0]; // 获取表单元素
   var inputs = form.getElementsByTagName("input"); // 获取表单中的所有input元素
 
   for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].name === "firstName") {
       console.log("First name input found!");
      } else if (inputs[i].name === "lastName") {
        console.log("Last name input found!");
      }
    }
</script>

在这个例子中，我们首先通过getElementsByName方法获取具有name属性为"myForm"的元素，然后通过getElementsByTagName方法获取表单中所有的input元素。接下来，我们遍历input元素，通过比较name属性的值来判断是哪个input元素，然后根据条件进行相应的操作。

清空页面内容

document.write(" ");

总结

getElementByld() 适用于选中该单个标签。

getElementsByName() +getElementsByTagName() 适用于选中多个标签。

四.JavaScript的内置对象

Date 内置对象

用于在页面中显示当前的小时，分钟和秒。

<body>
		<div id="01"></div>
		<script type="text/javascript">
			var date = new Date();
			var hh = date.getHours();
			var mm = date.getMinutes();
			var ss = date.getSeconds();
			document.getElementById("01").innerHTML = hh+":"+mm+":"+ss;
		</script>
</body>

Math对象

Math 用于生成一个随机数。

随机点名案例

<body>
		<input type="button" name="math" value="点我获取随机数" onclick="fun1()"/>
		<div id="01"></div>
		<script type="text/javascript">
			function fun1(){
				var students = new Array("A1","A2","A3","A4","A5");
				var num = Math.ceil(Math.random()*4)-1;
                //当 num = 1 时 取出的是students[1]=A2
				document.getElementById("01").innerHTML = students[num];
			}
		</script>
</body>

跟随时间走时案例

<body>
		<input type="button" value="点击触发清除函数" onclick="clearfun()"/>
		<h1></h1>
		<script type="text/javascript">
			function getdate(){
				//创建日期对象
				var date = new Date();
				//获取年月日时分秒
				var yyyy = date.getFullYear();
				var MM = date.getMonth()+1;
				var dd = date.getDate();
				var day = date.getDay();
				var hh = date.getHours();
				var mm = date.getMinutes();
				var ss = date.getSeconds();
				//拼出一句话
				var message = "现在是:<br/>";
				message += yyyy+"年"+MM+"月"+dd+"日<br/>"
				message += hh+"时"+mm+"分"+ss+"秒&nbsp;&nbsp;今天是星期"+day;
				//getElementsByTagName():选中的是一个数组。需要添加[0]将数组中的元素取出
				document.getElementsByTagName("h1")[0].innerHTML = message;
			}
			//每秒调用一次自定义函数getdate()
			var myTime = window.setInterval("getdate()",1000);
			function clearfun(){
				clearTimeout(myTime);
			}
		</script>
	</body>