HTML BOM

1.BOM的概念

概念：BOM（Browser Object Model）即浏览器对象模型

ps：通常情况下如果提到了bom，一般指的都是window对象。

BOM和DOM的关系

(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容

  (2)BOM通过  window  对象来访问、控制、修改浏览器中的内容

 

联系：BOM包含DOM。
      浏览器提供用来访问的是BOM对象

      从BOM对象可以访问到DOM对象

      从而使javascript可以操作浏览器、并通过操作浏览器读取到文档的内容

 

  区别：DOM描述了处理网页内容的方法和接口，即操作页面内部

      BOM描述了与浏览器进行交互的方法和接口，即操作页面之间

2.window对象

概念：window对象是bom的具象化表现形式。

window和bom之间的关系就好比document对象和dom之间的关系一样：

   属性和方法

(1)window.name

  属性：

  window.name是window对象的一个属性，默认值为空。

  特性：

  window.name值在不同的页面（甚至不同域名）加载后依旧存在,

      并且可以支持非常长的name值（2MB左右）

  应用：

  正是由于window.name属性拥有在不同页面保持存在的特性，

  因此出现了一门叫做【跨域传输】的技巧。

  而这个技巧的内部实现原理就是window.name的持久性的特性。

(2)window尺寸属性

 

  window.outerHeight

  window.outerWidth

  这两个属性返回的是整个浏览器的高度

  和页面窗口的大小没有任何关系

 

  window.innerHeight

  window.innerWidth

  返回视口的宽高 (计算滚动条的高度)

  页面变化它就变

 

  document.documentElement.clientHeight

  document.documentElement.clientWidth 

  返回视口的宽高(不计算滚动条的高度)

 

window.pageYOffset

window.pageXOffset

返回页面滚动的距离(通用)

这两个属性指的是页面发生滚动的距离

 

window.screenX

window.screenY

返回浏览器距离屏幕的距离

 

(3)window.navigator对象属性

 

window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的）

  navigator.appCodeName  //浏览器代码名的字符串表示

  navigator.appName   //官方浏览器名的字符串表示

  navigator.appVersion   //浏览器版本信息的字符串表示  

  navigator.cookieEnabled   //如果启用cookie返回true，否则返回false

  navigator.javaEnabled()   //如果启用java返回true，否则返回false

  navigator.platform   //浏览器所在计算机平台的字符串表示

  navigator.plugins   //安装在浏览器中的插件数组

  navigator.userAgent   //返回和浏览器内核相关的信息

 

  ps:如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备

 

(4)window对象中涉及到的方法

 

3.提示框

 浏览器中常见的三种提示框

(1) alert(alertMsg);

(2) prompt(alertMsg,defaultMsg); 

(3) confirm(alertMsg)

4.间隔调用和延迟调用

4.1 间隔调用

间隔调用全称为间隔调用函数，又名定时器。是一种能够每间隔一定时间自动执行一次的函数。

 

  语法：var timer = null；

      timer = setInterval(需要执行的函数，执行间隔时间ms)； 

 

  例如：var timer = null；

      timer = setInterval(function(){

  console.log('hello world!');

      },2000);

既然间隔调用每隔一段时间就会自动执行一次，那么清除间隔调用就势必存在。

  语法：clearInterval(变量标识)

  例如：clearInterval(timer);

  上述代码就能够将刚刚创建的定时器移除掉，令其不在间隔一段时间后自动再次执行。

 

4.2 延迟调用

  延迟调用又叫延迟调用函数。是一种能够等待一定时间后在执行的函数。

  语法：var timer = null;

      timer = setTimeout(需要执行的函数，等待的时间);

  例如：var wait = null；

      wait = setTimeout(function(){

  console.log('hello world!');

      },2000);

  根据语法所述，上述代码所表示的含义为：等待2s后打印一句【hello world！】

 

  注意：延迟调用除了在语法上和间隔调用略有不同外，其余语法均相同。

5.初识数据解析

数据解析：将【不能被直接使用的数据】通过某种方法转变为【能够被直接使用的数据】的过程称为数据解析。

  而对于开发者来说最常见的数据解析就是将【字符串数据】解析为【对象数据】