BOM

1.BOM对象之——navigator——掌握

  navigator对象指代当前的浏览器，可用于获取当前客户端的浏览器及操作系统的信息

  常用属性： 

navigator.cookieEnabled :  boolean,可能为true/false，反应当前浏览器是否启用了Cookie功能。

navigator.userAgent ： string， UA(UserAgent)，此属性可以反映出当前客户端浏览器的类型

 

常见浏览器的userAgent值：

Chrome	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Firefox	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Safari	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
IE	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Opera	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60

 

 

 

 

2BOM对象之——location——掌握

  location对象中包含着当前显示的页面的地址信息

  常用属性：

location.href： string  读取/设置页面的URL地址，注意：设置此属性的值作用相当于页面跳转

  常用方法：

location.assign( url )：修改当前显示的页面URL，即页面跳转

     location.reload( )：重新加载当前URL地址，即刷新当前页面

location.replace( url )：作用类似于页面跳转

 

 

3.BOM对象之——history——掌握

 history对象记录着当前浏览器窗口的URL访问历史

 常用属性：

history.length

 常用方法：

history.back( )     后退到历史记录中的上一页

history.forward( )  前进到历史记录中的下一页

history.go( num )  num是正数，表前进到历史记录中的下n页；num是负数，表后退到历史记录中的上n页

 

 

 

4.BOM对象之——screen——掌握

 

八位色： 

00000000  00000000  00000000

11111111  11111111  11111111

0~255     0~255      0~255

共可以表示2^24    1600 0000种颜色

 

十六位色：

00000000 00000000   00000000 00000000   00000000 00000000  

11111111 11111111   11111111 11111111   11111111 11111111

共可以表示2^48种    256T种颜色

 

screen对象表示当前浏览器所在屏幕(PC屏幕、平板屏幕、手机屏幕)

screen对象常用的属性：

screen.colorDepth   number，返回当前显示器的颜色位深

screen.width                 返回显示器的水平分辨率

screen.height                返回显示器的竖直分辨率

screen.availWidth          返回显示器的水平可用分辨率(除任务栏)

screen.availHight           返回显示器的竖直可用分辨率(除任务栏)

 

 

 

5.BOM对象之——event——难点&重点

  页面中每当发生某种状况时，浏览器就会自动创建一个Event对象——一个页面中可能创建多个Event对象。

两种事件模型：

1995：IE4提出了“IE事件模型”——“冒泡型事件模型”

2003：W3C DOM Lv3提出了“DOM事件模型”——“先捕获再冒泡型事件模型”

这两种事件模型定义了不同的事件对象，不同的属性和方法，甚至底层的理念都是不同的。

 Event Handler(事件处理器/句柄) 、Event Listener(事件监听器)，指用于监听并处理事件对象的函数。

http://developer.mozilla.org

 

为事件绑定监听函数的三种方式——重点

(1)直接在HTML中声明事件处理代码

<a onclick="alert(111);alert(222)">

   此方法把JS混在HTML中，把网页的行为混在内容中，不推荐使用！

(2)在脚本中为元素绑定事件处理函数

网页： <a id="">xxx</a>

脚本： document.getElementById('').onclick = function(){   }

  此方法把事件绑定和处理相关代码全部放在脚本中！实现了内容和行为的分离，推荐使用。  但此方法有个缺陷：只能为某个事件绑定一个处理函数！

(3)高级事件绑定方法

    IE事件模型：  element.attachEvent( 'onxxx',  fn );

    DOM事件模型：element.addEventListener( 'xxx', fn, useCapture );

  此方法可以为一个事件绑定多个处理函数！

 

6.IE事件模型和DOM事件模型最本质的区别——事件的生命周期(重点面试题)

  Event对象的生命周期：  创建 =>  成长(在不同的地点)  =>  消亡

  Event对象的传递需要经过三个阶段：

  (1)第一阶段：捕获阶段(Capture Phase)，event对象先传给父元素，再传给子元素

  (2)第二阶段：目标触发阶段(Target Phase)，event对象最终传递给事件源元素

  (3)第三阶段：冒泡阶段(Bubble Phase)，event对象穿给子元素，再传给父元素

  注意：IE事件模型中没有定义“捕获阶段”——冒泡型事件模型。

1.(继续)事件对象的生命周期

  第一阶段：捕获，event对象由父元素向下传递

  第二阶段：目标，event对象在事件源对象上触发

  第三阶段：冒泡，event对象由子元素向上传递

注意：(1)IE事件模型没有捕获阶段，element.attachEvent( 'onxxx', fn )也没有第三个参数。

       (2)element.onxxx = fn  绑定的事件处理函数都是在“冒泡阶段”触发的。

       (3)DOM事件模型中有完整的三个阶段，使用第三个参数useCapture(boolean)来指定“是否绑定在捕获阶段”

element.addEventListener('xx', fn, false) —— 事件监听函数绑定在冒泡阶段

element.addEventListener('xx', fn, true) —— 事件监听函数绑定在捕获阶段

 

 

 

 

2.如何获取event对象？

  IE:   HTML/JS中，可以直接使用event对象，把event看做是window.event属性。

  FF:   HTML中可以使用使用event对象，但JS中不能直接使用该对象。

  兼容性问题解决方法：

  绑定监听函数的方式1：

    HTML:   <a   onclick="f1( event )">

    JS:   function f1( e ){  console.log(e);   }

  绑定监听函数的方式2/3：

    JS：  element.onclick = function( event ){

 console.log( event );

          }

事件对象的常用属性和方法：

  (1)获取事件的源头对象

IE:  event.srcElement

FF:  event.target

兼容性解决方案：  var src = event.srcElement || event.target;

 

  (2)阻止事件的默认行为

事件的默认行为：一个事件触发后，默认要执行的动作。如submit按钮被单击，默认就要提交表单；网页中单击上下左右键，默认就要让内容发生滚动；输入框中击键后默认就会把键盘字符显示在输入框中.......

有些应用中，需要阻止事件的默认行为！

IE:    event.returnValue = false;

DOM:  event.preventDefault( );

保证兼容性的写法：

if( event.preventDefault ){

       event.preventDefault(  );              //DOM

}else{

       event.returnValue = false;           //IE

}

  (3)停止事件的继续传播

IE:  event.cancelBubble = true;           //取消冒泡

DOM:  event.stopPropagation( );        //停止传递/传播

考虑兼容性的写法：

if( event.stopPropagation ){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

  (4)获取事件的发生坐标

 

 

BOM： 七个对象，操作浏览器本身

DOM： N个对象，操作文档内容，分为三部分：

(1)核心DOM：用于操作任意的ML文档

(2)HTML DOM：用于操作HTML文档

(3)XML DOM：用于操作XML文档

 

4.HTML DOM

核心DOM和HTML DOM的关系

 核心DOM只定义几种不同Node对象：属性Node、文本Node、元素Node，但没有定义元素Node又可以细分为哪些；

 HTML DOM定义了100种左右的元素Node——每个HTML标签都对应一个对象，且这些对象预定义了若干的属性，如：

var img = new Image( );

img.src = '1.jpg';

img.title = '';

img.width = '';

img.alt = '';

img.onclick = function(){   }

<img src="" width="" height="" title="" alt="" onclick="">

5.常用的HTML DOM对象

 (1)Image对象    <=>     <img>

 (2)Table对象     <=>     <table border="" width="">

特别的属性：  rows    类数组型属性

特别的方法： 

insertRow( )   为表格对象添加一个tr子对象

              deleteRow( )  从表格对象中删除一个tr子对象

 (3)TableRow对象          <=>              <tr>

特别的属性： 

rowIndex : number，返回当前tr在table中序号

cells：类数组对象，返回当前tr中所有的td集合

特别的方法：

insertCell( )     在tr中的插入一个新的td

deleteCell( )    在tr中删除一个td元素

  (4)TableCell对象     <=>     <td>

  (5)Form对象   <=>    <form action="" method="" enctype="">

特殊的方法：

submit( )        提交表单中的内容

reset( )           重置表单中的内容

<form id="form1" action="user.php">

    <input ...>

    <input type="button"    onclick="if(...){ form1.submit( );}" >

    <input type="button"    onclick="form1.reset( );" >

</form>

  (6)表单中的输入域对象：  Text  Password   Checkbox....

常用的属性：

name

value

常用的方法：

focus( )                 申请获取输入焦点

select( )                 选中输入框中的所有文本

  (7)Select对象              <=>                     <select multiple="true" size="3">

特别的属性：

multiple： boolean，是否允许多选，注意！与HTML中的类型不同！！！！

size：  number，显示出来的选项的数量

value：string，当前选中的option的值

selectedIndex：number，当前选中的option的下标

options：类数组对象，包含所有的option

特别的方法：

add(option)           添加一个新option

remove(index)       删除一个option

  (8)Option对象            <=>                     <option value="">

创建新的Option：   new Option(txt,  value)

new Option('北京', '110');  <=> <option value="110">北京</option>

特别的属性：

index：  

text：                           开始标签和结束标签之间的文本

value：

selected：boolean       读取/设置当前option是否被选中

 

读写元素的属性：

  (1)核心DOM方式——兼容性好

var attr = document.createAttribute('src');

attr.nodeValue = '1.jpg';  //attr.value='';

e.setAttributeNode( attr );

-------------------------------

console.log(e.getAttributeNode( 'src' ).nodeValue);

  (2)核心DOM简写方式——老IE不支持

e.setAttribute('src',  '2.jpg');

-------------------------------

console.log( e.getAttribute('src') );

  (3)HTML DOM方式——网页开发中无兼容性问题

e.src = '3.jpg';

-------------------------------

console.log( e.src );

 

 

补充：Cookie

推荐广告、不再登录、购物车、主题选择....

上述功能的共同点：网站可以记住客户端之前的访问情况！——服务器程序设法保存了客户端的访问数据！

如何保存客户端访问数据：

(1)方式一：Cookie技术——前后台结合技术

(2)方式二：Session技术——纯后台技术

(3)方式三：HTML5本地存储技术

 

Cookie：小点心，甜点

使用js判断客户端浏览器是否禁用了Cookie:

console.log( navigator.cookieEnabled );   //true

 

2.Cookie对象的属性

  (1)expires: string，用于指定Cookie对象的有效期。注意：该属性赋值时必须是标准的GMT时间格式：'Mon, 24 Aug 2015 01:43:41 GMT'

如何获得当前系统时间7天后时间的GMT字符串

    new Date( new Date().getTime()+1000*3600*24*7 ).toGMTString();

  (2)domain: string，指定哪些域名下的页面可以访问当前Cookie对象（默认情况下，一个Cookie对象只运行当前域名下的页面访问）

domain=http://ad.baidu.com

  (3)path: string，指定目标域名下哪个路径下的页面可以访问当前Cookie对象

path=/news/f1/

 

 

3.创建和读取Cookie对象

 创建一个Cookie对象，不能使用new Cookie()，只能使用：

document.cookie = 'key=value' ;

说明：document.cookie可以先后赋值多次！只要每次赋值的key不同，就是创建了多个不同的Cookie对象！若有重复的key，则相当于修改了一个已经存在的Cookie对象的值。

因为document.cookie属性是string类型，所以读取所有的Cookie数据就是一个字符串拆分操作。

注意：因为Cookie一般是服务器让客户端保存的数据，网页必须通过服务器远程访问才能正确读取/设置Cookie对象！Chrome无法读取本地直接打开的网页保存的Cookie！Firefox可以直接读取。