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可以直接读取。 |