js学习之BOM

1. 浏览器的原理

1.1 浏览器的多线程

(1) 解析js引擎线程

(2) UI渲染线程

(3) 事件发起线程

(4) 发起请求的线程

(5) 定时器的线程

1.2 同步异步

(1) 前面事情的干完才能干后面的事情，例如吃完饭才能喝水。

(2) 前面的事情可以不干完，就干后面的事情，然后后面的事情干一半，可以回到前面的事情接着干，例如吃一口饭，喝一口水，然后再吃饭，再喝水。

1.3 浏览器执行JS的过程

　　第一阶段载入阶段默认：同步

(1) 获取html的内容进行解析

(2) 生成DOM树，将html文件转化为html的结构树（DOM树）放到浏览器执行的内存环境中。

DOM树：

    html
    head

        meta title script

    body

(3) 从html---> head---> meta---> title----> script（把js文件从服务器下载到浏览器本地来，下载完成后开始使用js解释器，进行解析，解析完成后进行执行，执行完成后）---> body

(4) 解析完成

(5) 渲染：下载图片，下载图标

(6) 载入阶段结束

　　第二阶段事件阶段默认：异步 onload

(1) js中访问DOM树：通过document对象进行访问 var n = document.getElementById("div1")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="13js的基本类型.js"></script>
</head>
<body>
    <div id = "d1">div1</div>
    <div id = "d2">div2</div>
</body>
</html>

// 使用document对象来访问DOM树
var a = document.getElementById("d1");  // 操作DOM获取节点
console.log(a);
var b = document.getElementById("d2");
console.log(b);

原因是：当js在head里面，而获取div在body里面，按照载入阶段的同步执行原理，当执行到head里面，发现js，解析js的时候，会执行js代码，根本就获取不到元素，因此都是null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="13js的基本类型.js"></script> -->
</head>
<body>
    <div id = "d1">div1</div>
    <script src="13js的基本类型.js"></script>
    <div id = "d2">div2</div>
</body>
</html>

// 使用document对象来访问DOM树
var a = document.getElementById("d1");
console.log(a);
var b = document.getElementById("d2");
console.log(b);

原因是：html中移动js代码到body中，加载完div1后执行js代码，所以div1能显示，div2不能显示

如果js还是写在head中，还想让js能获取body里面所有的东西，可以使用延迟加载和异步加载的形式

2. js操作浏览器信息

window可以操作全局变量

// DOM BOM 操作浏览器元素
// windows对象来操作：全局对象 全局的方法
console.log(window.age);
var age = 12;
console.log(window.age);  # 一般用法就是省略windows，其实全局变量都是存储在windows对象里面，当做一个属性
console.log(age)

2.1 DOM操作

2.2 BOM操作

(1) 弹窗操作 alert() 同步执行

alert("这里就是弹窗显示的内容");

(2) 弹窗操作 confirm() 带有返回值的弹窗

// 这种方式的弹窗会有返回值
var v = confirm("confirm弹窗，有个返回值");
console.log(v);

(3) 弹窗操作 prompt() 输入值的弹窗

// 这种方式的弹窗会有返回值
var v = prompt("输入你的姓名：");
console.log(v);

(4) 获取浏览器导航栏的信息，输入网址的地方

window.location

window.location.reload(); 刷新页面的功能

window.location.href; 获取页面的url

window.replace(); 跳转界面

跳转页面例子

var v = confirm("是不是想跳转到百度");
if(v == true){
    window.location.reload();
    window.location.replace("http://www.baidu.com")
};

修改代码顺序，就跳转不成功了。点击确定，一直加载弹窗

var v = confirm("是不是想跳转到百度");
if(v == true){
    // window.location.reload();
    window.location.replace("http://www.baidu.com");
    window.location.reload();
};

这种写法也是，点击确定跳转到百度页面，取消则一直弹窗

var v = confirm("是不是想跳转到百度");
if(v == true){
    // window.location.reload();
    window.location.replace("http://www.baidu.com");
}
else{
    window.location.reload();
}

原因是：刷新页面后，就要重新走一遍，页面加载，同步执行一遍，所以会出现这种持续弹窗的情况。

加载到新的界面后，就无法回退到原来的界面，window.location.replace()

(5) 控制浏览器的前进和后退

window.history.go() 快速的前进和后退 1 前进一个 -1 后退一个 2 前进两个 -2 后退两个跳转前的页面数据还在

history 浏览器

window.history

window.history.forward() 前进

window.history.back() 后退

跳转后原来页面的数据不在，就是一个页面

(6) 获取浏览器的信息

window.navigator

(7) 获取浏览器的分标率

window.screen

猜你喜欢