JavaScript操作BOM对象

最新推荐文章于 2024-07-27 17:31:46 发布

Marvellous丶

最新推荐文章于 2024-07-27 17:31:46 发布

阅读量146

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/93500136

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

JavaScript操作BOM对象

一、BOM模型

BOM，即浏览器对象模型（Browser Object Model），BOM提供了独立于内容的可以与浏览器窗口进行互动的对象结构
可实现功能
- 弹出新的浏览器窗口
- 移动，关闭浏览器窗口以及调整窗口大小
- 页面前进后退
- …

二、Window对象的常用方法

confirm()方法
- 将弹出一个确认对话框
- confirm()与alert ()、 prompt()区别
  - alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
  - prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
  - confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定 ”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>
```
运行结果：

点击确认后会显示

open()方法

window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)

height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar（yes\|no\|0\|1 下同）	是否显示浏览器的工具栏。黙认是yes
scrollbars	是否显示滚动条。黙认是yes
location	是否显示地址地段。黙认是yes
status	是否添加状态栏。黙认是yes
menubar	是否显示菜单栏。黙认是yes
resizable	窗口是否可调节尺寸。黙认是yes
titlebar	是否显示标题栏。黙认是yes
fullscreen	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是'我的窗口'</p>");
	myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="打开窗口" onclick="openWin()" />

</body>
</html>

运行结果：
在这里插入图片描述

三、history对象常用属性及方法

length 返回历史列表中的网页数
back() 加载 history 对象列表中的前一个URL
forward() 加载 history 对象列表中的下一个URL
go() 加载 history 对象列表中的某个具体URL
注意：
- history.back()等价于history.go(-1) 即浏览器中的后退
- history.forward()等价于history.go(1) 即浏览器中的前进

<!DOCTYPE html>
<html>
<head>
<script>
function goForward(){
	window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="前进" onclick="goForward()">

<p>注意,点击这里的前进按钮不会导致任何行动,因为历史列表中没有下一个URL。</p>

</body>
</html>

运行结果：
在这里插入图片描述

四、location对象

常用属性
- host 设置或返回主机名和当前URL的端口号
- hostname 设置或返回当前URL的主机名
- href 设置或返回完整的URL
常用方法
- reload() 重新加载当前文档，类似于你浏览器上的刷新页面按钮
- replace() 用新的文档替换当前文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script>
function replaceDoc(){
	window.location.replace("https://www.baidu.com")
}
</script>
</head>
<body>

<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">

</body>
</html>

运行结果：
在这里插入图片描述
点击后：

五、Document对象

常用属性
- referrer 返回载入当前文档的URL
- URL 返回当前文档的URL
常用方法
- getElementById() 返回对拥有指定id的第一个对象的引用
- getElementsByName() 返回带有指定名称的对象的集合
- getElementsByTagName() 返回带有指定标签名的对象的集合
- write() 向文档写文本、HTML表达式或 JavaScript代码

动态改变层，标签中的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script>
function changeLink(){
	document.getElementById('myAnchor').innerHTML="百度";
	document.getElementById('myAnchor').href="https://www.baidu.com";
	document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
 
<a id="myAnchor" href="//www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="修改链接">
 
</body>
</html>

运行结果：
在这里插入图片描述
点击按钮后：

六、Date对象

格式

var 日期对象 = new Date(参数);
常用方法
- getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间
- getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间
- getHours() 返回 Date 对象的小时数，其值介于0～23之间
- getMinutes() 返回 Date 对象的分钟数，其值介于0～59之间
- getSeconds() 返回 Date 对象的秒数，其值介于0～59之间
- getMonth() 返回 Date 对象的月份，其值介于0～11之间
- getFullYear() 返回 Date 对象的年份，其值为4位数
- getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
定时函数
- setTimeout(“调用的函数”,等待的毫秒数) 在指定等待毫秒数后执行所调用的函数一次
- setInterval(“调用的函数”,间隔的毫秒数) 每隔指定等待毫秒数后执行函数一次
清除函数
- clearTimeout(setTimeOut())
- clearInterval(setInterval()返回的ID值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="time" ></div>
<input type="button" value="start" onclick="start()">
<input type="button" value="stop" onclick="stop()">
<script>
    var myTime;
    function fun() {
        var now = new Date();
        console.log(now);

        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        document.getElementById("time").innerText = hh+":"+mm+":"+ss;
    }

    function start() {
        myTime = setInterval("fun()");
    }

    function stop() {
        clearInterval(myTime)
    }

</script>
</body>
</html>

运行结果：
在这里插入图片描述

七、Math对象

在这里插入图片描述

Marvellous丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作BOM对象

JavaScript操作BOM对象一、BOM模型BOM，即浏览器对象模型（Browser Object Model），BOM提供了独立于内容的可以与浏览器窗口进行互动的对象结构可实现功能弹出新的浏览器窗口移动，关闭浏览器窗口以及调整窗口大小页面前进后退…二、Window对象的常用方法confirm()方法将弹出一个确认对话框confirm()与aler...
复制链接

扫一扫

专栏目录