[JavaScript知识库] JS-BOM

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS-BOM -> 正文阅读

[JavaScript知识库]JS-BOM

1.什么是BOM

JavaScript的构成：ECMAScript、DOM、BOM
1）ECMAScript：欧洲计算机制造商协会提出的，规定JS的基本语法，如变量、数组、字符串、函数。我们现在说的是ES5，新的有ES6、ES7
2）DOM：W3C组织提出的，Document Object Model文档对象模型，主要规定了操作文档和文档中内容的API
3）BOM：最初由网景公司提出，Browser Object Model浏览器对象模型，它也不是一个对象，可以说它是一个对象的集合。里面有很多对象，利用这些对象可以操作浏览器即浏览器中内容。
主要包含如下对象：
(1) window 对象，是 JS 的最顶层对象， 其他的 BOM 对象都是 window 对象的属性。
(2) document 对象，文档对象；
(3) l ocation 对象，浏览器当前 URL 信息；
(4) navigator 对象，浏览器本身信息；
(5) screen 对象，客户端屏幕信息；
(6) history 对象，浏览器访问历史信息；
BOM与DOM的关系：
(1)DOM 通过 document 对象来访问、控制、修改 html 和 xhtml 等文档中的内容
(2)BOM 通过 window 对象来访问、控制、修改浏览器中的内容
联系： BOM 包含 DOM 。
区别： DOM 描述了处理网页内容的方法和接口，即操作页面内部
　　　 BOM 描述了与浏览器进行交互的方法和接口，即操作页面之间

2. window对象

1）window对象时BOM中的顶级对象，其它对象是window对象的一个属性
2）window对象也是一个全局对象，因为在全局作用域下面定义的所有的变量、方法都相等于给window对象绑定的属性或方法，可以使用window.的形式来使用这些属性和方法。在平时使用时可以将window.省略。
3）另外还要注意，如果是全局的变量或方法，还可以使用this.的形式来调用，因为在全局环境下window === this;
4）window对象不需要手动创建，当浏览器窗口被打开时，后台会自动创建一个用来管理当前窗口的window对象。当浏览器窗口被改变时该对象会被自动销毁

3. window对象的常用属性

1）name属性：该属性时window对象的一个属性，默认值为空字符串，该属性可以用来在不同窗口间进行数据的传递，使用浏览器超链接实现
2）浏览器距离屏幕的距离
screenX：获取浏览器窗口距离屏幕左侧的距离　　
screenY：获取浏览器窗口距离屏幕顶端的距离
３）window尺寸属性
outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动条）。　　
innerheight返回窗口的文档显示区的高度。　
innerwidth 返回窗口的文档显示区的宽度。

４）navigator属性：该属性是window对象的一个属性，本身也是对象类型，可以使用window.navigator的形式获取该对象。利用该对象可以获取一些和使用的浏览器相关的信息

navigator.appCodeName //浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示
navigator.appVersion //浏览器版本信息的字符串表示
navigator.userAgent //返回和浏览器内核相关的信息，如果用户是使用移动端设备打开的网页，那么该属性的返回值中会有mobile字符
navigator.cookieEnabled //如果启用cookie返回true，否则返回false
navigator.javaEnabled() //如果启用java返回true，否则返回false
navigator.platform //浏览器所在计算机平台的字符串表示
navigator.plugins //安装在浏览器中的插件数组

5） location属性：该属性时window对象的一个属性，这个属性本身也是对象类型，可以使用window.location的形式获取到该属性。该对象的作用是帮助我们获取或操作url地址信息。location对象包含的属性如下

href属性：获取或者设置url地址内容，
获取格式：window.location.href，设置格式：window.location.href = 值；
protocol属性：返回所使用的 web 协议（http: 或 https:）
hostname:返回 web 主机的域名，如"http://world.people.com.cn/n1/2020/0402/c1002-31659500.html"中world.people.com.cn就是该网址的域名
port属性：返回的是端口号（如果地址中的端口号被省略，那么返回的结果为空串，默认为80）
pathname：返回当前页面的路径和文件名
search属性：该属性的作用是获取或者设置地址中的查询字符串
location对象常用方法
a. reload方法：重新加载页面，即实现页面的刷新，
格式：location.reload();
b. assign方法：重新设置url地址，
格式：location.assign('新的地址');会产生浏览记录
c. replace方法：替换当前地址，
格式：location.replace('新的地址');不会产生浏览记录

6）history属性：window.history对象表示整个浏览器的页面栈对象。在对象中提供了一些属性和方法来帮助更好的控制整个浏览器中页面的访问。

window.history.back() 跳转到栈中的上一个页面
window.history.forward() 跳转到栈中的下一个页面
window.history.go(num) 跳转到栈中的指定页面

4. window对象的常用方法

1）alert：弹出警告框
2）confirm：弹出确认框，window.confirm(‘提示文字’);返回值为布尔值
3）prompt：弹出输入框，返回值为字符串类型
4）isNaN：判断参数是否为NaN，如果是NaN，返回true、否则返回false
5）isFinite：判断参数是否为有限数值

6）open方法

作用：打开新窗口
格式：window.open('地址', '窗口名称', '窗口特性')，三个参数都可以省略，如果省略表示打开一个空白窗口
参数说明
a.窗口名称可以不写，如果不写，那么会多次打开新窗口，如果写，那么会打开一次新窗口，后面在执行open方法时会在上一次打开的窗口里面重新加载页面
b.窗口特性"width=XXXX height=XXXX top=XXXX left=XXXX"
返回值：返回值是代表新窗口的window对象

7) close方法

作用：关闭当前窗口
格式：window.close();

<body>
    <button>打开一个空白窗口</button>
    <button>打开指定窗口</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 打开空白窗口
        btns[0].onclick = function() {
            var newWindow = window.open();  
            newWindow.document.write('<h1><i>我是新的窗口</i></h1>');
            newWindow.document.body.style.background = 'green';
        };
        // 打开指定窗口
        btns[1].onclick = function() {
            window.open('http://www.baidu.com', 'baiduWindow', 'width=500 height=300 top=400 left=600');
        };
    </script>
</body>

8）定时器方法—— 间隔调用：
setInterval方法

作用：该方法被称为"间歇调用"函数，能够在指定的时间间隔下重复执行某些操作。它是一个异步的方法
格式：window.setInterval(要重复执行的操作, 时间间隔);
参数说明：
a.要重复执行的操作：可以是匿名函数，也可以是函数名称
b.时间间隔：以毫秒为单位，1秒 = 1000毫秒
返回值：返回值为一个数值，该数值为定时器的编号，该编号可以用来清除页面中的定时器

clearInterval方法

作用：清除有setInterval设置的定时器
格式：window.clearInterval(定时器编号);

9）定时器方法——延迟调用
setTimeout方法

作用：该方法也被称为"超时调用函数"，作用是可以在延迟一定时间后执行某个操作
格式：window.setTimeout(要执行的操作，延迟时间);
参数说明：
a.要执行的操作：匿名函数、函数名称
b.延迟时间：以毫秒为单位
返回值：返回值为一个数值，为该定时器的编号

clearTimeout方法

作用：清除有setTimeout生成的定时器
格式：window.clearTimeout(定时器编号);

10） moveTo方法

作用：将窗口移动到指定的位置
格式：代表窗口的window对象.moveTo(x, y);
参数说明
x：表示移动到的水平位置
y；表示移动到的垂直位置

11） moveBy方法

作用：将窗口按照指定的距离进行移动
格式：代表窗口的window对象.moveBy(x, y);
参数说明
x：表示水平移动的距离
y；表示垂直移动的距离

<body>
<button>打开一个新的窗口</button>
<button>moveTo方法</button>
<button>moveBy方法</button>
<script>
    var btns = document.querySelectorAll('button');
    var newWindow;
    btns[0].onclick = function() {
        newWindow = window.open('', '', 'width=300 height=200 top=300 left=500');
    };
    btns[1].onclick = function() {
        newWindow.moveTo(400, 200);
    };
    btns[2].onclick = function() {
        newWindow.moveBy(-100, -50);
    }
</script>
</body>

12） resizeTo方法

作用：将窗口尺寸更改到指定的宽度和高度
格式：代表要更改的窗口的window对象.resizeTo(宽度，高度);

13） resizeBy方法

作用：将窗口尺寸按照指定的数据进行扩展
格式：代表要更改的窗口的window对象.resizeBy(每次更改的宽度，每次更改的高度);

<body>
<button>打开一个新的窗口</button>
<button>resizeTo方法</button>
<button>resizeBy方法</button>
<script>
    var btns = document.querySelectorAll('button');
    var newWindow;
    btns[0].onclick = function() {
        newWindow = window.open('', '', 'width=200 height=200');
    };
    btns[1].onclick = function() {
        newWindow.resizeTo(500, 300);
    };
    btns[2].onclick = function() {
        newWindow.resizeBy(50, 30);
    };
</script>
</body>

14） scrollTo方法

作用：移动窗口中滚动条到指定的位置
格式：window.scrollTo(x, y)

15） scrollBy方法

作用：移动窗口中滚动条的位置
格式：window.scrollBy(x, y)

<body>
<button>打开一个新的窗口</button>
<button>scrollTo</button>
<button>scrollBy</button>
<script>
    var btns = document.querySelectorAll('button');
    var newWindow;
    btns[0].onclick = function() {
        newWindow = window.open();
        newWindow.document.write('测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本');
    };
    btns[1].onclick = function() {
        newWindow.scrollTo(300, 500);
    };
    btns[2].onclick = function() {
        newWindow.scrollBy(50, 100);
    }
</script>
</body>

5. 页面加载与JS解析顺序

defer属性：等待DOM加载完成后才去加载JS脚本
<script src="test1.js" defer></script>
async属性：DOM加载和js脚本加载异步执行，同时进行。
<script src="test1.js" async></script>
async优势：避免了因DOM文件过大导致的【文件加载阻塞】
async缺陷：无法确定js脚本到底何时执行，并仅对外部js脚本生效
js脚本在不受任何外界因素影响的时候，实际上就是按照html代码的加载顺序执行的。因此【不添加任何属性的js脚本】总是会在【引入脚本的节点】加载完毕之前执行。

6. call、apply：这两个方法的作用是一样的，都是用来扩展函数的作用域范围

call的格式：函数.call(借用者，参数1，参数2，参数3...);
apply的格式：函数.apply(借用者，[参数1，参数2，参数3...]);
说明：call和apply方法时函数对象的两个方法，函数对象包含了call和apply方法，另外还要注意利用这两个方法来扩展函数的作用域时，借用过来的函数不再需要手动调用。在借用过来的那一刻该方法已经被执行了

var obj1 = {
     name: 'Tom',
     age: 10,
     speak: function() {
       console.log('hellowold');
     	console.log(this);
     },
     add: function(num1, num2) {
      	console.log(num1 + num2);
     }
};
var obj2 = {
    name: 'Jack',
    age: 11,
};
//call
obj1.speak.call(obj2);
obj1.add.call(obj2, 100, 200);
//apply
obj1.speak.apply(obj2);
obj1.add.apply(obj2, [1000, 2000]);

7. 浏览器的性能优化

1）回流
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
2）重绘
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
3）DocumentFragment
a. documentFragment是一个文档片段，一种‘轻量级节点’
b. 通常作为仓库来使用，不存在DOM树上，是一种游离态
c. DocumentFragment的用途
当我们用JS的DOM创建很多节点时，将创建的节点都放在DocumentFragment这样的节点上，然后把DocumentFragment加入至DOM，只需要完成一次渲染就可以达到之前很多次渲染的效果

<body>
<script>
    //常规方法:创建100个li元素内容为1-100
     var ul = document.createElement('ul');
     document.body.appendChild(ul);
     for (var i=1; i<=1000; i++) {
         var li = document.createElement('li');
         li.innerHTML = `我是第${i}个li`;
         ul.appendChild(li);
     }
    //DocumentFragment方法:创建100个li元素内容为1-100
    var ul = document.createElement('ul');
    var flag = document.createDocumentFragment();//创建文档碎片
    for(var i=1; i<=100; i++){
        var li = document.createElement('li')
        var liText = document.createTextNode(i);
        li.appendChild(liText);
        flag.appendChild(li);
    }
    ul.appendChild(flag);
    document.body.appendChild(ul);
</script>
</body>