四、浏览器对象模型[BOM]详解
1、浏览器对象概念
BOM即提供与浏览器交互的方法和接口。原本是用来处理浏览器窗口和框架，但是很多js扩展也算作BOM的一部分。例如：弹出窗口、移动缩放、关闭窗口，navigator对象、location对象、screen对象，对cookies的支持等。
2、窗口对象（window）-----顶级对象
BOM的核心对象是window，表示浏览器的一个实例。在浏览器环境下，window对象就担当了global对象的角色。
注：在window对象上定义的属性和直接定义的全局属性个点差别。
例如：
var age = 29;
window.color="red";
console.log(delete window.age); //false
console.log(delete window.color); //true
//直接用var 定义的全局属性，其属性的[[configuration]]特性值被设置为false,所以这样定义的属性不可以通过delete操作符删除。<1>window对象常见属性
| 属性 | 说明 |
| closed | 表明窗口是否关闭的布尔值 |
| defaultStatus | 表示窗口状态栏中的默认状态信息 |
| documnent | 表示窗口中显示的当前文档对象 |
| frames | 表示窗口中包含的所有的frame对象数组 |
| history | 窗口最近访问的URL列表 |
| length | 表示当前文档中的框架个数 |
| location | 表示窗口中当前显示的URL |
| name | 表示窗口的名称 |
| opener | 表示打开当前窗口的窗口 |
| parent | 表示当前窗口的上一级窗口 |
| self | 表示当前窗口 |
| status | 表示窗口状态中的临时信息 |
| top | 表示一系列嵌套窗口中的最上层窗口（框架） |
窗口位置:
window.screenLeft/screenTop 火狐不支持/IE、safari、Opera、Chrome支持
window.screenX/screenY IE9+ 及其它均支持
例如:var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX
窗口大小:
window.innerWidth/innerHeigh //可视区域大小，浏览器缩放，值会改变，IE需9+
window.outerWidth/window.outerHeight //整个浏览器的窗口大小，缩放值会改变
另外：
document.documentElement.clientWidth/document.documentElement.clientHeight //可视区域大小，浏览器缩放，值会改变（与上面的innerWidth类似）
document.body.clientWidth/document.body.clientHeight //Body区域大小，调试看布局，比较清晰<2>window对象常用方法
Window.open(“url”) 打开窗口
Window.close() 关闭窗口
window.moveTo(100,100) 将当前浏览器窗口移到屏幕坐标（100，100）
window.moveBy(左/右，上/下) 正数右、上，负数左、下
window.resizeTo(x,y) 调整窗口大小
window.alert() 弹出对话框
window.prompt() 提供文本输入窗口var answer = prompt(“内容”)
window.confirm() 提供确认取消对话框
window.setTimeout() 指定毫秒后执行
window.setInterval() 每个一段毫秒数执行
注：window.moveTo/window.moveBy、window.resizeTo/window.resizeBy IE中可以有效果，但是其他可能被浏览器禁用了，
例如：以频道模式开新页面：window.open("DOM2.html","_blank","channelmode")
2、文档对象（document）
DOM是一种将XML或者HTML文档解析成树形节点的方法。通过DOM的方法与属性，我们就可以访问页面中的任何元素，进行元素的增删改等操作。DONM是一套独立的API体系，不仅仅在js中有相关实现，其他语言中也有。
DOM树中的每一个节点都是一个对象，这些对象都是由一些构造器函数来创建的。例如：head标签是由HTMLHeadElement()负责创建的。DOM既能解析XML文档，也能解析HTML文档，HTML可以当做是一种特殊的XML文档。DOM Level1中用于解析XML的那部分称Core DOM,在这基础上扩展的那部分成为HTNL DOM。HTML DOM 并不适用于所有的XML文档，它只适用于HTML文档。
在DOM中，节点的类型有12种，每种类型分别用一个整数来表示(用nodeType查看)。
3、浏览器对象(navigator)
Navigator是一个用于反映浏览器本身及其功能信息的对象。
例如：区分浏览器：
If(navigator.userAngent.indexOf(‘MSIE’) !== -1{
//this is IE
}else{
//not IE
}
navigator.appName 浏览器名称
navigator.cookieEnable 表示cookie是否启用
navigator.onLine 表示浏览器是否连到了因特网
navigator.vendor 表示浏览器的品牌
navigator.plugins 返回插件对象数组
4、屏幕对象（screen)
screen.colorDepth 显示器的色位
screen.width 屏幕宽度
screen.height 屏幕高度
screen.availWidth 屏幕宽度-系统部件宽度
screen.availHeight 屏幕高度-系统部件高度
5、位置对象（location）
location属性是一个用于存储当前载入页面URL信息的对象。
location.href 显示的是完整的URL
location.hostname 显示的是相关的域名信息
location.search 返回url的查询字符串以？开始
location.reload() 重新载入某个页面
location.replace(“url”)
设置为顶层：top.localtion =self.location
6、历史对象（history）
包含了用户已浏览的 URL 的信息
history.length 之前访问多少页面
history.forward() 前进到之前访问的页面
history.back() 后退到上次访问的页面
history.go(-1) -1表示后退一页，-2后退两页，0重新载入当前页
7、框架对象（window.frames）
表示当前页面中所有frame元素集合，无论页面有无frame。Window.frames总是存在
五、文档对象模型[DOM]详解
1、DOM概念
文档对象模型，即提供访问和操作网页内容的方法和接口。是针对XML但是经过扩展用于HTML的API（应用程序编程接口），DOM把整个页面映射为一个多层节点结构。
2、DOM树结构
注：属性节点不属于子节点。
* 节点
每一个HTML标签都是一个元素节点。
标签中的文本则是文本节点。
标签的属性是属性节点。
document类似于一个虚拟的顶层节点。它下面包含了很多子节点。document对象是HTMLDocument(这个又继承自Document类型)的一个实例,表示整个HTML页面。
3、document对象的属性
| 属性 | 说明 |
| alinkColor | 表示活动超链接的颜色 |
| all | 表示文档中所有html标记的数组 |
| anchors | 所有锚的数组，锚是指带有name属性的A元素 |
| applets | 文档中所有的java小程序 |
| bgcolor | 文档的背景颜色 |
| cookie | 文档相关的cookie |
| domain | 文档的服务器域 |
| embeds | 文档中嵌入对象的数组 |
| fgColor | 文档的前景色 |
| forms | 文档中所有的表单数组 |
| images | 文档中所有的图像的数组 |
| lastModified | 文档最后修改的日期 |
| linkColor | 未被访问的超链接颜色 |
| referrer | 链接到当前文档的URL |
| title | 文档的标题 |
| URL | 文档的URL |
| vlinkColor | 已被访问的超链接颜色 |
| link | 所有带有href的A或area对象 |
4、document对象的方法
| 方法 | 说明 |
| close() | 关闭文档输出流，调用此方法之前没有被显示到页面中的输入内容被显示出来 |
| open(mimeType) | 为放置到文档中的数据打开一个流 |
| write(value1,value2...) | 作为字符串添加到文档中 |
| writeln(value1,value2) | 与write不同之处在于会在最后一个参数换行 |
| 其他方法 |
createElenent(tag)等） 2、处理键盘事件（keydown、keypress、keyup） 3、处理鼠标事件（click、dblclick、mousedown、mouseup)
|
5、核心Document对象详细
<1>document.documentElement属性
document.documentElement属性是访问文档根元素的快捷方式。对于在浏览器中呈现的HTML文档而言，所谓的根元素就是<html>标签。
所有浏览器都支持：document.documentElement和document.body
<2>使用Document对象的方法查找Element对象
getElementById、getElementsByName、getElementsByTagName、getElementsByClassName[这是html5中新增的方法]
<3>使用Document对象的方法创建节点
createElement(tagName):创建元素节点
createTextNode(data):创建文本节点
createAttribute(name):创建属性节点
<4>核心Element对象
* 操纵Element对象的属性
获取属性：getAttribute(name)方法
设置属性：setAttribute(name,value)方法
删除属性：removeAttribute(name)方法
获取属性节点：getAttributeNode(name)方法
设置属性节点：setAttributeNode(name,value)方法
删除属性节点：removeAttributeNode(name)方法
<5>节点名称、值和类型
* nodeName:其内容是给定节点的名字 例如：document.all[0].nodeName->HTML
如果节点是元素节点，nodeName返回这个元素的名称。
如果是属性节点，nodeName返回这个属性的名称。
如果是文本节点，nodeName返回一个内容为#text的字符串。
* nodeType：返回一个整数，这个数值代表者给定节点的类型
Node.ELEMENT_NODE --1 --元素节点
Node.ATTRIBUTE_NODE --2 --属性节点
Node.TEXT_NODE --3 --文本节点
Node.CDATA_SECTION_NODE --4
Node.ENTITY_REFERENCE_NODE --5
Node.ENTITY_NODE --6
Node.PROCESSING_INSTRUCTION_NODE --7
Node.COMMENT_NODE --8
Node.DOCUMENT_NODE --9
Node.DOCUMENT_TYPE_NODE --10
Node.DOCUMENT_FRAGMENT_NODE --11
Node.NOTATION_NODE --12
* nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是null。
例如：
var oDiv = document.getElementById('a1'); //获取元素对象
var oAttr = oDiv.getAttributeNode('id'); //获取属性对象
console.log(oDiv.nodeName); //DIV (nodeType --1)
console.log(oAttr.nodeName); //id (nodeType --2)<6>父节点、子节点和同辈节点
父节点：parentNode
parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document节点没有父节点。Children兼容版的ChildNodes
子节点：
ChildNodes：获取指定节点的所有子节点结合。（有兼容性问题：火狐和IE）
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。
同辈节点：
nextSibling：返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
<7>节点属性
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包哈你的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。
<8>检测子节点和属性
* 查看是否存在子节点：hasChildNodes()
* 查看是否存在属性：hasAttributes()
* 即使节点中没有定义属性，其attributes属性仍然有效，而且长度值为0。同样节点中的childNodes属性也是如此。
* 当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少节点和属性的话，仍要使用attributes和childNodes属性。
* 在IE浏览器中，不存在hasAttributes()方法。
<9>操作DOM节点树
* 插入节点
appendChild()方法：插入到最后面
insertBefore(参数1：节点，参数2：谁之前)方法
没有insertAfter方法
* 删除节点：removeChild()方法
* 替换节点：replaceChild()方法
<10>复制和移动节点
复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点。
移动节点：由一下三种方法组合完成
* 查找节点
getElementById，getElementsByName，getElementsByTagName，
getElementByClassName
* 插入节点
appendChild，insertBefore
* 替换节点
replaceChild
<11>innerHTML、testContent、innerText
innerHTML浏览器几乎都支持该属性，但不是DOM标准的组成部分。
innerHTML属性可以用来读、写给定元素里的HTML内容。
innserHTML属性多余div或span标签配合使用。
例如：在一个<div id="d"></div>插入一个<h1>今天</h1>元素，如果利用前面的知识，要创建节点，并且创建文本节点、添加子节点等操作。用innerHTML则只要一条语句document.getElementById("d").innerHTML = "<h1>今天</h1>"。
textContent --标签内文本内容（不含标签）部分低版本ie不支持
innerText --标签内的文本（不含标签）
<12>其他
文档碎片：document.createDocumentFragment 理论上可以提高DOM操作性能
6、form对象常用属性和方法
| 属性或方法 | 说明 |
| action | 表单提交执行的动作，相当于form班级的action属性 |
| elements | 表单中所有控件元素的数组，elements[0]取得表单第一个控件 |
| encoding | 表单数据的编码类型，相当于form标记符的enctype属性 |
| length | 表单中元素的数目 |
| method | 发送表单的http方法，相当于form标记符的method属性 |
| name | 表单的名称，相当于form标记符的name属性 |
| onReset | 当用户单击重置按钮是触发，执行相应的脚本代码 |
| onSubmit | 当用户单击提交按钮是触发，执行相应的脚本代码 |
| reset() | 重置，相当于单击表单中的重置按钮 |
| submit() | 提交表单，相当于单击表单在的提交按钮 |
| target | 相当于form标记符的target属性：_blank/_parent_self/_top |
| enctype | 请求的编码类型 |
下拉框：selectedIndex 获取下拉框选中的下标
Options[selectedIndex].value 获取下拉框选中的值
7、文档对象引用方法
注：由于window对象时默认的最上层对象，因此引用它的子对象时，可以不用window。
方式一：通过这四个方法getElementById、getElementsByName、getElementsByTagName、getElementsByClassName
方式二：使用对象索引。例如：document.forms[0]
返回集合常见的有：document.images、document.applets、
document.links、document.anchors、document.forms
方式二：使用对象名称。例如：document.forms[“form1”]、document.images[“img1”]....
另外特殊的多数在表单中应用：document.form1.my*
注：form1可以是name名称也可以是id名称。如果表单名称为form1,表单中包含了一个名称为myText的文本框，则可以使用document.form1.myText来引用该文本对象。
方式三：特殊方法，elements数组或者document对象的all属性。
通过all属性访问html元素有三种方法：
- 通过索引或名称直接引用 document.all[索引] /document.all[“name名称”]
- 使用item()方法：document.all.item(“test”) 取到所有的name名称为test或者id为test的元素对象的一组对象。[返回数组]
（3）使用tags()方法：document.all.tags(“tagName标签名”)[返回数组]
方式四：借助子节点、父节点、同辈节点去访问其他节点
8、DOM扩展
Selectors API 是由W3C发起指定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API Level1核心两个方法：querySelector()和querySelectorAll()。这个支持：IE8、Firefox3.5+、Safari3.1+、Chrome和Opera10+.
注：若是浏览器不支持querySelector()和querySelectorAll()会抛出错误
<1>querySelector() 返回一个匹配的元素。
该方法接收一个CSS选择符，如果没有匹配到元素，返回null
例如:
取得body元素：var body = document.querySelector(‘body’);
取得Id为myDiv的元素：var myDiv= document.querySelector(‘#myDiv’);
取得类为selected的第一个元素：var s = document.querySelector(‘.selected’);
<2>querySelectorAll() 返回所有匹配的元素
例如：取得某div中的所有<em>元素:[类似于：getElementsByTagName(‘em’)]
var body = document.getElementById(‘myDiv’).querySelectorAll(‘em);
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll(‘p strong’);
<3>classList属性
Html中新增，目前IE浏览器并不支持。支持的有：Firefox3.6+和Chrome
例如：我们在定义class属性时，常会见到这种的：
<div id="mydiv" class="c1 c2 c3 c4"></div>
<script>
var classList = document.getElementById('mydiv').classList;
for (var i=0;i<classList.length;i++) {
alert(classList[i]); //c1 c2 c3 c4
}
</script>classList属性时新集合类型DOMTokenList的实例。有length属性和item()方法。其他方法：add(value)、contains(value)、remove(value)、toggle(value)
<4>元素遍历
ElementTraversal API为DOM元素操作添加了下面5个属性：
childElementCount:返回子元素的个数（不包括文本节点的和注释）
firstElementChild:指向第一个子元素
lastElementChold:指向最后一个子元素
previousElementSibling:指向前一个同辈元素
nextElementSibling:指向后一个同辈元素
<5>焦点管理
Html5也添加了辅助管理DOM焦点的功能：document.activeElement属性
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间值为null.另外还新增了hasFocus()方法，监测文档是否获得了焦点。
例如：var button = document.getElementById(‘mybutton’);
button.focus();
alert(document.activeElement === button) //true
alert(document.hasFocus()) //true
<6>HTMLDocument的变化
①redyState属性
IE4最早为document对象引入了readyState属性。Html5吧这个属性纳入了标准当中。readyState属性有两个值：loading 正在加载文档 complete 已经加载完成文档
②兼容模式compatMode属性
③head属性
前有document.body引用文档的body元素。Html5新增了document.head属性。
④字符集属性
Html5新增document.charset设置字符集
⑤插入标记
innerHTML 已纳入HTML5规范。（标签里面的所有内容，不包括标签本身）
outHTML 会包括目标标签在内。
insertAdjacentHTML(参数，插入的内容) 新增方法。该方法有四个参数：
beforebegin:在当前元素之前插入紧邻的同辈元素
afterbegin:在当前元素之下或第一个子元素之前
beforeend:在当前元素之下或最后一个子元素之后
afterend:当前元素之后插入紧邻的同辈元素
⑥scrollIntoView()方法
如何滚动页面也是DOM规范没有解决的一个问题。HTML5最终选择了scrollIntoView()作为标准方法。
<7>自定义数据属性
例如：
<div id="myDiv1" data-appId ="1" data-myname="Mike"></div>
<div id="myDiv2" myname="Mike"></div>
<script>
var oDiv1 = document.getElementById('myDiv1');
var oDiv2 = document.getElementById('myDiv2');
console.log(oDiv2.myname); //undefined 取不到
console.log(oDiv1.dataset.myname); //Mike 取到了自定义属性值
</script><8>HTML5新增表单验证
9、专有扩展
<1>children 属性
与childNodes没什么区别
<2>contains()方法
<3>innerText属性、outerText属性
<4>滚动
scrollIntoViewIfNeeded(alignCenter)作用于浏览器窗口或者容器元素
scrollByLines(lineCount)将元素的内容滚动指定的行高
scrollByPages(pageCount)将元素的内容滚动指定的页面高度
10、DOM2和DOM3
<1>命名空间
<2>style对象
属性：
cssText:访问到style特性中的css代码。
例如：div.style.cssText=“width:20px;height:20px”;
length:应用给元素的css属性的数量。
parentRule:表示CSS信息的CSSRule对象
getPropertyCSSValue(propertyName):给定属性值的CSSValue对象
[object CSSPrimitiveValue],这个对象有
cssText(输出属性值)、cssValueType(属性名)
getPropertyProority(propertyName):如果属性使用了！Important返
“important”;否则返回空字符串。
getPropertyValue(propertyName):返回给定属性的字符串值。这个比
getPropertyCSSValue用的多。
item(index):返回给定位置的css属性名称（结合length遍历）
removeProperty(propertyName):从样式中删除给定的属性。
setProperty(propertyName,value,priority):将给定的属性设置为相
应的值，并加上“important”或者“”字符串。
<3>操作样式表
CSSStyleSheet继承自StyleSheet、CSS规则
<4>偏移量、客户区大小、滚动大小
偏移量：元素的可见大小
offsetHeight:元素垂直方向高度，包括边框像素。
offsetWidth:元素在水平方向上宽度，包括边框像素。
offsetLeft:元素的外边框距离做左内边框的像素。
offsetTop:元素的外边框距离做上内边框的像素。
客户区大小：元素（内边距）空间大小
clientHeight:元素（内）空间高度。
clientWidth:元素（内）空间宽度。
滚动大小：
ScrollHeight:在没有滚动条的情况下，元素的总高度
scrollWidth:在没有滚动条的情况下，元素的总宽度
scrollLeft:被隐藏在内容区域左侧的像素
scrollTop:被隐藏在内容区域上方的像素
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
