JavaScript高级编程笔记(3)

BOM(浏览器对象模型)

由于window对象同时扮演ECMAScript中的global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

窗口大小:

• outerWidth、outerHeight 返回浏览器窗口本身的尺寸
• innerWidth、innerHeight 返回该容器中页面视图区的大小
• document.documentElement.clientWidth、document.documentElement.clientHeight 保存页面视口的信息。(标准模式)
• document.body.clientWidth、document.body.clientHeight 保存页面视口的信息。(混杂模式)
• document.compatMode 判断页面当前模式(CSS1Compat为普通模式)
• window.resizeTo()和window.resizeBy()方法可以调整浏览器窗口的大小.其中resizeTo()接受浏览器窗口新宽度和新高度,而resizeBy()接受新窗口与原窗口的宽度和高度之差.
• window.open() 打开窗口,第一个参数为url,第二个参数为窗口名称.在不打开新窗口的情况下会忽略第三个参数.该方法会返回一个指向新窗口的引用.

间歇调用和超时调用:

• 超时调用： setTimeout(fun,time) 和 clearTimeout(object) .
• 间歇调用：setInterval(func,time) 和 clearInterval(object) .

location 对象

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。如果地址里没有“#”，则返回空字符串。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号，设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议，取值为 ‘http:’,’https:’,’file:’ 等等。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

navigator 对象

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

• window.navigator.plugins[]可以遍历检测浏览器的插件.

注册处理程序:

• registerContentHandler()和registerProtocolHandler()方法可以让一个站点指明它可以处理特定类型的信息.他们接受三个协议:要处理的协议、处理该协议页面的URL和应用程序的名称。

Screen 对象

在编程中作用不大，基本上只用来表明客户端的能力。

History 对象

history对象保存着用户上网的内容.
history.go()方法可以在用户历史记录中任意跳转，接受一个参数表示向后或向前跳转的一个整数值。
负数向后，正数向前，传递字符串直接跳转.

---

客户端检测

能力检测

能力检测目标不是识别特定浏览器，而是识别浏览器的能力。

能力检测的基本模式是:

if (object.propertyInQuestion){
  // 使用 object.propertyInQuestion
}

重要概念：一个特性存在，不一定意味着另一个特性也存在。
可靠的检测：

• 不要用!object.sort来检测一个对象是否支持排序,而是用 typeof object.sort == "function"; 来进行检测.
• 不要用特性来检测确定浏览器.
• 部分浏览器有bug 可以使用怪癖检测.

用户代理检测

关于浏览器的检测可以在搜索引擎中获取相关信息。

DOM

Dom（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）.DOM描绘了一个层次化的节点数，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape以及微软公司创始的DHTML（动态HTML）。

节点关系图.jpg

Document类型

referrer - 来源页面URL

domain - 域:

• 可以将网页中的内嵌框架页面domain的值设置为和主页相同的域来进行互相访问对方的JvaScript对象。
• 如果域名一开始是松散的那么就不能将它再设置为紧绷的.(设置为"wrox.com"之后再也不能将它设置回"p2p.wrox.com")

getElementByTagName(elementname)、getElementByName(name)、getElementById(id) 获取元素操作

• getElementById(id) 只返回文档中第一次出现的元素ID。而getElementByTagName接受元素参数返回包含多个参数的NodeList(HTMLCollection)。
• HTMLCollection.namedItem() 方法从集合(HTMLCollection)中取回带有指定名称的节点或元素。

DOM一致性检测

document.implementation属性为浏览器对DOM的实现提供响应信息和功能的对象。

• DOM1级只为该属性规定了一个方法:hasFeature().这个方法接受两个参数：要检测的DOM功能和版本号，浏览器支持则返回true。

DOM节点：

节点类型.png

节点类型 - 所返回的值.png

DOM扩展

1、选择符API

"querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

• getXXXByXXX获取的是动态集合,querySelector获取的是静态集合.
• querySelector(CSS选择符)返回与模式匹配的第一个元素，没找到返回null.
• querySelectorAll(CSS选择符) 返回NodeList对象.
• matchesSelector(CSS选择符)，如果调用元素与该选择符匹配，返回true，否则返回false。(即判断CSS选择符匹配的是调用元素).
  如果使用的话最好使用包装函数.

浏览器版本	函数
原生	matchesSelector()
IE9+	msMatchesSelector()
FireFox 3.6+	mozMatchesSelector()
Chrome、Safari 5+	webkitMatchesSelector()

2、元素遍历(支持规范：IE 9+ 、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+)

• childElementCount ：返回子元素（不包括文本节点和注释）的个数。
• firstElementChild：指向第一个子元素；firstChild的元素版。
• lastElementChild：指向最后一个子元素；lastChild的元素版。
• previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
• nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

var i,
     len,
     child = element.firstElementChild;
while(child != element.lastElementChild){
     processChild(child); 
     child = child.nextElementSibling;
}

---

HTML5

• getElementsByClassName() 方法
  接受一个或者多个类名字符串(空格分隔)，返回带有指定类的所有元素的NodeList.
• classList 属性
  元素classList属性是新集合类型DOMTokenList实例。定义以下方法

方法名	解释
add(value)	将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
contains(value)	表示列表中是否存在给定的值，如果存在则返回true,否则返回false。
remove(value)	从列表中删除给定的字符串。
toggle(value)	如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

1、焦点管理

• focus()
• hasFocus()

2、 HTMLDocument的变化

• readyState 属性
  • loading, 正在加载文档.
  • complete, 已经加载完文档.
• compatMode 兼容模式
  • CSS1Compat,标准模式.
  • BackCompat,混杂模式.
• head 属性
  要引用文档元素，可以解和使用这个属性和另一个后被方法

  var head = document.head || document.getElementsByTagName("head")[0];

• charset 字符集属性
  • document.charset 表示文档实际使用的字符集
  • document.defaultCharset 表示根据默认浏览器以及操作系统的设置，当前文档默认的字符集应该是什么。

3、 自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名。只要以data-开头即可。

添加了自定义属性之后，可以通过元素dataset属性来访问自定义属性的值。

4、 插入标记 （未掌握）

• innerHTML 属性

  在读模式下,innerHTML属性返回与调用元素的所有子节点（元素、注释和文本节点）对应的HTML标记。
  在写模式下,innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

在写模式下,innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。
如果设置的值仅仅是文本而没有HTML标签，那么结果就是设置纯文本。
注意:大多数浏览器不会执行插入在innerHTML的