一、从 BOM 的学习，窥探学习方法论
1、BOM里面包括几十个属性，几十个方法，面对如此繁杂的内容，我们该如何去学习呢？【学习方法论，非常重要】
【线性学习】如果我们只是一个一个API的去熟悉，那么很容易忘记，而且不知道API之间的关系。
下等学习策略【树形学习】弄清楚整个BOM的架构，然后每个分支下熟悉几个常用API，这样的学习方式就非常优秀。
高屋建瓴
image.png
2、BOM的全称是什么？是什么之间的桥梁？【弄清楚BOM的关系、作用】
-【Browser Object Model】可以看成是连接JavaScript脚本与浏览器窗口的桥梁。
3、BOM主要包括哪四个对象模型？【BOM树形结构】
- 【window】包括全局属性、方法、控制浏览器窗口相关的属性、方法；
- 【location】是URL的抽象实现；
- 【history】操作浏览器的历史；
- 【document】当前窗口操作文档的对象；
二、学习window、location、history对象【BOM树形结构的分支】
1、window对象在浏览器中有哪两个身份？
- 【全局对象】我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；在浏览器中就是window对象。
- 【浏览器窗口对象】作为浏览器窗口时，提供了对浏览器操作的相关的API。
image.png
image.png
2、window作为窗口对象，常见的属性演练？
// 浏览器高度
console.log(window.outerHeight);
console.log(window.innerHeight);
console.log("screenX:", window.screenX);
console.log("screenY:", window.screenY);
// 监听滚动
window.addEventListener("scroll", (event) => {
console.log(window.scrollX);
console.log(window.scrollY);
});
3、window作为窗口对象，常见的方法演练？
window.onfocus = function () {
console.log("窗口获取到焦点");
};
window.onblur = function () {
console.log("窗口失去了焦点");
};
// 整个页面以及所有的资源都加载完成
window.onload = function () {
console.log("页面加载完成");
};
// hash改变
const hashBtn = document.querySelector("#hash");
hashBtn.onclick = function () {
location.hash = "aaa";
};
window.onhashchange = function () {
console.log("hash被修改了");
};
4、为什么window会有 addEventListener等事件方法？代码演练？
- 【从架构的角度】因为 Window类继承自 EventTarge 。
function handleWindowClick() {
console.log("浏览器窗口被点击");
}
function handleWindowScroll() {
console.log("浏览器窗口在滚动");
}
// window的事件监听
window.addEventListener("click", handleWindowClick);
window.addEventListener("scroll", handleWindowScroll);
// window的事件监听移除
const removeBtn = document.querySelector("#removeBtn");
removeBtn.onclick = function () {
window.removeEventListener("click", handleWindowClick);
window.removeEventListener("scroll", handleWindowScroll);
};
image.png
5、location对象的常见方法？
image.png
image.png
6、history对象的常见方法？
image.png
