JS操作BOM的一些方法

百香果果ccc

已于 2022-10-29 17:49:09 修改

阅读量219

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-09-22 18:03:54 首次发布

本文链接：https://blog.csdn.net/wytccc/article/details/126995409

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

BOM（browser object model）：浏览器对象模型

系统对话框

alert()、confirm()、prompt()、open()属于window中的方法，均可在方法前面加window，不加也可

alert()
【弹出只有确定按钮的对话框】
```
window.alert("我是警告框");
```

confirm()
【弹出带确定、取消按钮的对话框】

// 点击确定，控制台返回true
// 点击取消，控制台返回false
console.log(window.confirm("是否要删除此条数据？"));

在这里插入图片描述

prompt()
【弹出带输入框、确定、取消的对话框】

// 参数1：标题
// 参数2：输入框默认值，可不传
// 点击确定，控制台返回 能！
// 点击取消，控制台返回 null
console.log(window.prompt("学习能改变命运吗？", "能"));

在这里插入图片描述

open()
【打开新浏览器窗口】

// 参数1：跳转的URL
// 参数2：浏览器别名，string类型（起名字方便定位，不会打开两个一样名字的浏览器窗口，只会重新加载）
// 参数3：可以控制打开窗口的属性
<script>
	let myWindow;
    function openBaidu() {
        myWindow = window.open("https://www.baidu.com", 'baidu', "width=300,height=100,left=200,top=200");
    }
</script>
<body>
	<button onclick="openBaidu()">打开百度</button>
</body>

在这里插入图片描述

close()
【关闭浏览器窗口】

<script>
	function closeBaidu() {
		// myWindow变量在第4项中已声明
		myWindow.close();
	}
</script>
<body>
	<button onclick="closeBaidu()">关闭百度</button>
</body>

效果：点击“关闭百度”按钮，百度浏览器窗口被关闭

history：当前窗口的历史记录

history.length
【输入当前窗口历史记录的条数】
history.back();
【返回上一条历史记录】
history.forward();
【前进到下一条历史记录】
history.go(参数);
① 0：刷新当前页面
② 正整数：前进n条记录
③ 负整数：后退n条记录

location：地址栏

网址划分
中文：协议://主机名:端口号/路径/?查询字符串#锚点
英文：protocol://hostname:port/pathname/?search#hash

获取全部网址：localtion.href
获取网址中的某一部分
1. location.protocol
2. location.hostname
3. location.port
4. location.pathname
5. location.search
6. location.hash
location.assign(url)：在当前窗口跳转到此url，可返回到上一个页面
location.replace(url)：在当前窗口替换成新的url，不可返回
location.reload()：刷新当前窗口
location.reload(true)：不查缓存，直接强制从服务器重载

百香果果ccc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS操作BOM的一些方法

alert()、confirm()、prompt()、open()属于window中的方法，均可在方法前面加window，不加也可。英文：protocol://hostname:port/pathname/?中文：协议://主机名:端口号/路径/?效果：点击“关闭百度”按钮，百度浏览器窗口被关闭。【弹出带输入框、确定、取消的对话框】【弹出带确定、取消按钮的对话框】【弹出只有确定按钮的对话框】【打开新浏览器窗口】
复制链接

扫一扫