概念
BOM(Browser Object Model)是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BdM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。
Window对象
Window是浏览器的顶级对象，调用Window下的属性和方法时，可以省略Window
Window对象
// 场景1
let obj = {
name: 'example',
fx: function () {
console.log(this)
}
}
let temp = obj.fx
temp() // window.temp()
// 场景2
function f() {
return function () {
console.log(this);
}
}
window.f()()
// 场景3-内置函数
window.alert("000")
prompt("01")定时器
setInterval与setTimeout
let time = setInterval(function () {
let date = new Date()
document.querySelector("#time").innerHTML = date.toLocaleString()
}, 1000)
document.querySelector("#btn").onclick = function () {
window.clearInterval(time)
}
setTimeout(function () {
let date = new Date()
document.querySelector("#time").innerHTML.toLocaleString()
}, 10000)onload加载
方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
查看代码
// document.querySelector("#bg").style.backgroundColor = "#F00";
window.onload = function () {
document.querySelector("#bg").style.backgroundColor = "#F00";
}location
查看代码
<input type="button" value="跳转" id="btn"/>
<script>
//对象中的属性和方法
//location对象
console.log(window.location);
//地址栏上#及后面的内容(包括#)
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容 ?后面
console.log(window.location.search);
onl oad=function () {
document.querySelector("#btn").onclick=function () {
//设置跳转的页面的地址
location.href="http://www.baidu.com";//属性----------------->必须记住
//location.reload();//重新加载--刷新
//location.replace("http://www.baidu.com");//没有历史记录
};
};
</script>历史histry
前进
<a href="history后退.html">跳转</a>
<input type="button" value="前进" id="btn" />
<script>
document.querySelector("#btn").onclick = function () {
window.history.forward();
}
</script>后退
<input type="button" value="后退" id="btn"/>
<script>
document.querySelector("#btn").onclick=function () {
window.history.back();
}
</script>本地存储localStorage
查看代码
<input type="button" value="获取本地存储数据" id="btn" />
<script>
window.onload = function () {
window.localStorage.setItem("stu", JSON.stringify({ id: 1, name: "jack" }))
}
document.querySelector("#btn").onclick = function () {
let stu = JSON.parse(localStorage.getItem("stu"))
console.log(stu);
}标签：function,console,log,JavaScript,window,BOM,document,location From： https://www.cnblogs.com/vayenge/p/17502120.html