浏览器抓取网页(什么是BOM？概念BOM(BrowserObjectModel)的信息操作)

　　浏览器抓取网页(什么是BOM？概念BOM(BrowserObjectModel)的信息操作)

　　一、什么是 BOM？概念

　　BOM（Browser Object Model）的全称是浏览器对象模型。

　　浏览器可以操作：

　　获取一些浏览器相关信息（窗口大小）

　　操作浏览器跳转到页面

　　获取当前浏览器地址栏的信息

　　操作浏览器的滚动条

　　浏览器信息版

　　使浏览器显示弹出窗口（警报/确认/提示）

　　BOM的核心是Window对象

　　Window是浏览器内置的一个对象，里面收录了操作浏览器的方法

　　二、window的核心对象使用

　　location：当前页面的地址

　　history：页面的历史

　　navigator：收录浏览器相关信息

　　screen：用户显示屏幕相关的属性

　　文档：文档对象

　　1.常用方法：prompt（用户输入对话框）、alert（提示和确认提示）、confirm（提示确认和取消对话框）、

　　close（关闭浏览器窗口），open（打开一个新的 url 窗口），

　　setTimeout（在指定的毫秒数后调用函数或计算表达式），setInterval（在指定的时间段内以毫秒为单位调用函数或表达式）

　　

　　2.定时器：它们是什么？图片轮播 2s图片换一次：用于图片轮播、在线时钟、弹窗广告。

　　任何自动执行的东西很可能与计时器有关

　　1）在 javascript 中，setTimeout() 方法是一个设置“一次性”调用的函数。其中 clearTimeout() 可以用来取消这个函数

　　2)在javsscript中，可以使用setInterval()方法设置一个叫做“repeatedly”的函数，clearInterval()取消执行。

　　3.通过窗口拼接获取浏览器窗口的大小（innerHeight和innerWidth）

　　这两种方法都是获取浏览器窗口的宽度和高度（包括滚动条）

　　3.浏览器滚动事件：

　　//这个onscroll事件时当前浏览器的滚动条滚动的时候触发

或者鼠标滚轮滚动的时候触发

window.onscroll=function (){

console.log('浏览器滚动了')

}

//注意：前提是页面的高度要超过浏览器的可视窗口才可以

　　4.浏览器滚动距离：

　　可以滚动浏览器的内容，则可以得到到浏览器滚动的距离

　　思考：

　　浏览器是否真的滚动？

　　事实上，我们的浏览器并没有滚动，它一直存在

　　什么是滚动？是我们的页面

　　所以，实际上浏览器并没有移动，而是页面上升了。

　　因此，这不再是简单的浏览器的内容，而是我们页面的内容

　　因此，您使用的是文档对象，而不是使用窗口对象

　　5.浏览器（页面）滚动的距离

　　scrollTop 获取页面向上滚动的距离

　　两种获取方式：

　　document.body.scrollTop

　　document.documentElement.scrollTop

　　区别：

　　IE浏览器：当没有DOCTYPE声明时，同时使用

　　当有 DOCTYPE 声明时，只能使用文档。documentElement.scrollTop

　　铬和火狐：

　　当没有 DOCTYPE 声明时，使用 document.body.scrollTop

　　当有 DOCTYPE 声明时，使用 document.documentElement.scrollTop

　　苹果浏览器

　　两者都不使用，使用单独的方法 window.pageYOffset

　　scrollLeft 获取页面向左滚动的距离

　　使用场景：滚动加载判断、滚动回顶部、自动滚动列表