浏览器抓取网页(BOM1.浏览器浏览器对象模型(browserobjectmodel).36 )

　　浏览器抓取网页(BOM1.浏览器浏览器对象模型(browserobjectmodel).36

)

　　物料清单

　　1.物料清单

　　浏览器对象模型

　　BOM允许我们通过JS来操作浏览器

　　为我们提供了BOM中的一组对象来完成浏览器的操作

　　BOM 对象

　　窗户

　　表示整个浏览器的窗口，window也是网页中的一个全局对象

　　航海家

　　表示当前浏览器的信息，通过这些信息可以识别不同的浏览器

　　地点

　　表示当前浏览器的地址栏信息。您可以通过Location获取地址栏信息，也可以操作浏览器跳转到页面。

　　历史

　　表示浏览器的历史，通过它可以操作浏览器的历史

　　由于隐私原因，对象无法获取具体的历史记录，只能操作浏览器向前或向后翻页

　　并且该操作只对当前访问有效

　　屏幕

　　表示用户屏幕的信息，通过它可以获取用户显示器的相关信息

　　这些 BOM 对象在浏览器中保存为窗口对象的属性，

　　可以通过window对象使用，也可以直接使用

　　2.导航器

　　表示当前浏览器的信息，通过这些信息可以识别不同的浏览器

　　由于历史原因，Navigator 对象中的大部分属性不再帮助我们识别浏览器

　　一般我们只使用userAgent来判断浏览器信息，

　　userAgent 是一个字符串，收录描述浏览器信息的内容，

　　不同的浏览器会有不同的userAgent

　　火狐用户代理

　　Mozilla5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko20100101 Firefox50.0

　　Chrome 的 userAgent

　　Mozilla5.0 (Windows NT 6.1; Win64; x64) AppleWebKit537.36 (KHTML, 像 Gecko) Chrome52.0.274 3.82 Safari537.36

　　IE8

　　Mozilla4.0（兼容；MSIE 8.0；Windows NT 6.1；WOW64；三叉戟7.0；SLCC2；.NET CLR 2.0.50727;.NET CLR 3.5.30729;.NET CLR 3.0.30729;媒体中心 PC 6.0;.NET4.@ >0C；.NET4.0E)

　　IE9

　　Mozilla5.0（兼容；MSIE 9.0；Windows NT 6.1；WOW64；三叉戟7.0；SLCC2；.NET CLR 2.0.50727;.NET CLR 3.5.30729;.NET CLR 3.0.30729;媒体中心 PC 6.0;.NET4.@ >0C；.NET4.0E)

　　IE10

　　Mozilla5.0（兼容；MSIE 10.0；Windows NT 6.1；WOW64；三叉戟7.0；SLCC2；.NET CLR 2.0.50727;.NET CLR 3.5.30729;.NET CLR 3.0.30729;媒体中心 PC 6.0;.NET4. @>0C；.NET4.0E)

　　IE11

　　Mozilla5.0（Windows NT 6.1；WOW64；三叉戟7.0；SLCC2；.NET CLR 2.0.50727；.NET CLR 3.5.30729;.NET CLR 3.0.30729;媒体中心 PC 6.0;.NET4.0C;.NET4. 0E; rv:11.0) 像壁虎

　　在IE11中，微软和IE相关的logo都被去掉了，所以我们基本上无法通过UserAgent来识别一个浏览器是否是IE。

　　alert(navigator.appName);

var ua = navigator.userAgent;

console.log(ua);

if(firefoxi.test(ua)){

alert("你是火狐！！！");

}else if(chromei.test(ua)){

alert("你是Chrome");

}else if(msiei.test(ua)){

alert("你是IE浏览器~~~");

}else if("ActiveXObject" in window){

alert("你是IE11，*敏*感*词*毙了你~~~");

}

　　3.历史

　　对象可用于操纵浏览器向前或向后翻页

　　长度

　　属性，可以获取链接数作为访问

　　背部（）

　　可用于返回上一页，与浏览器的返回按钮相同

　　向前（）

　　可以跳转到下一页，和浏览器的前进按钮一样

　　走（）

　　可用于跳转到指定页面

　　它需要一个整数作为参数

　　1：表示向前跳转一个页面等价于forward()

　　2：表示向前跳转两页

　　-1：表示跳回一页

　　-2：表示跳回两页

　　4.位置

　　这个对象封装了浏览器地址栏的信息

　　如果直接打印位置，可以得到地址栏的信息（当前页面的完整路径）

　　警报（位置）；

　　如果直接将location属性修改为完整路径，或者相对路径

　　然后我们的页面会自动跳转到这个路径，并生成对应的历史记录

　　位置=“http：”；

　　位置 = "01.BOM.html";

　　分配（）

　　用来跳转到其他页面，效果和直接修改位置一样

　　重新加载（）

　　用于重新加载当前页面，同刷新按钮

　　如果在方法中传入一个true作为参数，会强制刷新缓存，刷新页面

　　location.reload(true);

　　代替（）

　　可以用新页面替换当前页面，调用后页面也会跳转

　　不生成历史记录，不能使用返回键返回

　　5.窗口

　　计时器

　　设置间隔（）

　　定时通话

　　一个函数可以每隔一段时间执行一次

　　范围：

　　1.回调函数，每隔一段时间就会调用一次

　　2.每次调用之间的时间，以毫秒为单位

　　返回值：

　　返回 Number 类型的数据

　　此编号用作计时器的唯一标识符

　　clearInterval() 可用于关闭计时器

　　该方法需要一个定时器的标识符作为参数，它将关闭该标识符对应的定时器。

　　clearInterval() 可以接收任意参数，

　　如果参数是有效的定时器标识符，则停止对应的定时器

　　如果参数不是有效的 ID，则什么也不做

　　var num = 1;

var timer = setInterval(function() {

count.innerHTML = num++;

if(num == 11) {

//关闭定时器

clearInterval(timer);

}

}, 1000);

　　延迟通话

　　设置超时

　　延迟调用函数不会立即执行，而是在一段时间后执行，并且只执行一次

　　延迟调用和定时调用的区别，定时调用会执行多次，而延迟调用只会执行一次

　　延迟调用和定时调用其实可以互相替代，开发时可以根据自己的需要选择

　　var timer = setTimeout(function(){

　　控制台.log(num++);

　　},3000);

　　使用 clearTimeout() 关闭延迟调用

　　清除超时（定时器）；

　　# 类操作

　　直接修改元素的class css：

　　元素的样式由 style 属性修改。每次修改样式时，浏览器都需要重新渲染页面。这种实现的性能比较差，当我们要修改多个样式时，这种形式不是很方便。我希望一行代码可以同时修改多个样式。

　　我们可以通过修改元素的class属性来间接修改样式。这样，我们只需要修改一次就可以同时修改多个样式。浏览器只需要重新渲染一次页面，性能更好。

　　并且通过这种方式，性能和行为可以进一步分离

　　box.className += " b2"; //注意有空格，添加class属性

　　延时调用

setTimeout

延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次

延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

var timer = setTimeout(function(){

console.log(num++);

},3000);

使用clearTimeout()来关闭一个延时调用

clearTimeout(timer);

#类的操作

直接修改元素的类css：

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便 我希望一行代码，可以同时修改多个样式

我们可以通过修改元素的class属性来间接的修改样式.这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，

并且这种方式，可以使表现和行为进一步的分离