前端入门篇（四十）JS基础7浏览器原理和BOM

body

…

6.html文件解析完成后，渲染页面，下载页面需要的图片视频等

7.载入阶段完成

代码验证：

html文件：

aaa

bbb

js文件：

//第一阶段为同步阶段的演示

var n = document.getElementById(‘div1’)

console.log(n)

n = document.getElementById(‘div2’)

console.log(n)

结果：都是null

原因：

document.getElementById()是获取DOM树节点的方法，当DOM树解析到script时，进入同步任务，需要完成js解析才会继续生成DOM树，才能解析到body部分，而js文件就提出要获取body中的标签，构成资源被锁住的局面（资本家筷子问题），因此输出的结果是null

解决方法：

1.如果将script放在body最下方，在解析到div后才进入同步任务，就能获取到结果：

js文件不变，html文件改动：

aaa

bbb

控制台输出：

aaa

bbb

如果把script放在div1后面，div2前面，则只有显示出div1

2.延迟加载：虽然script放在head里，但效果和放在body最下方一致

3.异步加载

BOM操作：浏览器弹窗

---

浏览器弹窗相当于是同步任务，当弹窗没有得到回应时，页面是不会加载后面的内容的

html文件：

aaa

1.方式一：alert弹窗

js文件：

//方式一

alert(‘alert 弹窗’)

会弹出一个弹窗，只能点击确定，点击之后，显示aaa（script写在head里，按从上到下的顺序，应先弹窗再执行到body里的内容）

alert没有返回值

2.方式二：

//方式二

var bfs = confirm(‘confirm 弹窗’);

console.log(‘confirm结果:’ + bfs);

页面会弹出一个弹窗，可以点击确定或取消，当点击确定时，返回true；当点击取消时，返回false

3.方式三

//方式三

var rs = prompt(‘prompt 弹窗’,‘ccy’);

console.log(rs);

页面会弹出一个弹窗，可以输入文字，此处设置了默认值’ccy’，则弹窗的输入框会自动有’ccy’;

点击确定，就会返回对应值；

如果没有填数据，返回就是空；

点击取消，返回null

BOM操作：获取导航栏信息

---

使用window.location对象进行操作，可以详细看url各个属性

其中pathname:/，指的是网址中域名端口之后剩余的部分

1.使用window.location.href或者

window.location.toString()都可以获得网址信息，window是全局对象，可省略不写

2.使用location.reload()可以刷新页面；

3.使用location.replace(‘新网址’)可以加载另一个页面；

案例：

var bfs = confirm(‘confirm 弹窗’);

if (bfs){

location.replace(‘https://www.baidu.com/’);

}else{

location.reload();

}

BOM版本、前进后退、屏幕大小

---

1.前进与后退：

history.back();//后退一步

history.forward();//前进一步

history.go(-1);//后退一步

history.go(-2);//后退两步

history.go(1);//前进一步

history.go(2);前进两步

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】