第九章 客户端检测
客户端检测是Web开发领域中一个饱受争议的话题，由于浏览器间存在差别，通常需要根据不同浏览器的能力分别编写不同的代码。注意只要能找到通用的方法，就用通用的方法，不到万不得已，不要使用客户端检测。
常见的三种客户端检测技术：
一、能力检测：
这是人们广泛接受的客户端检测形式。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
a、能力检测的基本模式：if (object.propertyInQuestion){ //使用 object.propertyInQuestion }
b、更可靠的能力检测：
能力检测对于想知道某个特性是否会按照适当方式行事（而不仅仅是某个特性存在）非常有用。
比如：通过检测对象是否存在 sort()方法，来确定对象是否支持排序。问题是，任何包含 sort 属性的对象也会返回 true，更好的方式是检测 sort 是不是一个函数（可用typeof）。
二、怪癖检测
与能力检测类似，怪癖检测（quirks detection）的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷。
例如早期的 WebKit 中就存在一个怪癖，即它会在 for-in 循环中返回被隐藏的属性。
怪癖检测通常涉及到运行一小段代码，然后确定浏览器是否存在某个怪癖。由于怪癖检测与能力检测相比效率更低，因此应该只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精确地检测特定的浏览器和版本。
三、用户代理检测
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的， 而且该字符串可以通过JavaScript的 navigator.userAgent 属性访问。在服务器端，通过检测用户代 理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已才用的做法，其优先级排在能力检测和（或）怪癖检测之后。
用户代理字符串的发展过程中，浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息，欺骗网站相信自己的浏览器是另外一种浏览器，这使得用户代理字符串变得很复杂。
很多时候，确切知道浏览器的名字和版本号不如确切知道它使用的是什么呈现引擎。
用户代理检测是客户端检测的最后一个选择。只要可能，都应该优先采用能力检测和怪癖检测。用户代理检测一般适用于下列情形：
a、 不能直接准确地使用能力检测或怪癖检测。例如，某些浏览器实现了为将来功能预留的存根函数。在这种情况下，仅测试相应的函数是否存在还得不到足够的信息。 b、同一款浏览器在不同平台下具备不同的能力。这时候，可能就有必要确定浏览器位于哪个平台下。
c、为了跟踪分析等目的需要知道确切的浏览器。
第十章 DOM
DOM（文档对象模型）是针对 HTML和 XML文档的一个 API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
一、节点层次
DOM可以将任何 HTML 或 XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。
1、Node类型
DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个Node 接口在 JavaScript 中是作为 Node 类型实现的；
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
节点的常用属性：nodeType属性，用于表明节点的类型，nodeName 和 nodeValue 属性；
节点间的关系：节点可以有其父节点，兄弟节点。每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点，相关的属性：nextSibling、previousSibling、firstChild 和 lastChild； ownerDocument：该属性指向表示整个文档的文档节点。
操作节点的常用方法：appendChild()、insertBefore()、replaceChild()、 cloneNode()；cloneNode（）方法可选择深复制或浅复制。
2、Document类型
a、JavaScript通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承 自 Document 类型）的一个实例，表示整个HTML页面。而且，document对象是 window 对象的一个 属性，因此可以将其作为全局对象来访问。
b、Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过，常见的应用还是作为HTMLDocument 实例的 document 对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。
c、常用属性： documentElement ，该属性始终指向 HTML页面中的<html>元素；可通过 childNodes 列表访问文档元素；
作为HTMLDocument 的实例，document 对象有一个 body 属性，直接指向<body>元素。
作为 HTMLDocument 的一个实例，document 对象还有一些标准的 Document 对象所没有的属性：title、 URL、domain 和 referrer。
d、 常用方法：
取得元素的操作可以使用 document 对象的几个方法来完成。其中，Document 类型为此提供了两个方 法：getElementById()和 getElementsByTagName()。
e、通过 document 对象能将输出流写入到网页中。这个能力体现在下列 4个方法中：write()、writeln()、open()和 close()。
3、Element类型
Element 类型用 于表现 XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性。
a、HTML元素
所有 HTML元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表 示。HTMLElement类型直接继承自Element并添加了一些属性。
b、 取得特性
每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。
c、设置特性的方法：setAttribute()、removeAttribute()；
d、attributes 属性
Element 类型是使用 attributes 属性的唯一一个 DOM节点类型。attributes 属性中包含一个 NamedNodeMap，与NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。
e、创建元素
可以使用 document.createElement()方法可以创建新元素，对于创建好的元素要被添加到文档树中才会被显示，一旦将元素添加到文档树中，浏览器就会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。要把新元素添加到文档树，可以使用appendChild()、insertBefore()或 replaceChild()方法。
4、Text类型
文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML字符，但不能包含HTML代码。
可以使用 document.createTextNode()创建新文本节点；
在一个包含两个或多个文本节点的父元素上调用 normalize()方法，则会将所有文本节点合并成一个节点；
splitText()方法能将一个文本节点分成两个文本节点，分割文本节点是从文本节点中提取数据的一种常用 DOM解析技术。
5、 Comment类型
注释在 DOM中是通过 Comment 类型来表示的。
6、CDATASection类型
CDATASection 类型只针对基于 XML 的文档，表示的是 CDATA 区域。CDATASection 类型继承自 Text 类型，因此拥有除 splitText()之外的所有字符串操作方法。
7、 DocumentType 类型
DocumentType 类型在 Web 浏览器中并不常用，仅有 Firefox、Safari和 Opera支持它。DocumentType包含着与文档的doctype有关的所有信息，
8、DocumentFragment类型
在所有节点类型中，只有 DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段 （document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存来可能会添加到文档中的节点。
9、Attr类型、元素的特性在DOM中以 Attr 类型来表示。
二、DOM操作技术
可用 JavaScript 生成那些通常原本是用 HTML 代码生成的内容，书上举例了下面三个DOM操作技术。
1、动态脚本：动态脚本，指的是在页面加载时不存在， 但将来的某一时刻通过修改DOM动态添加的脚本；
2、动态样式：在页面加载完成后动态添加到页面中的样式；
3、操作表格
理解 DOM的关键，就是理解 DOM对性能的影响。DOM操作往往是 JavaScript程序中开销最大的部分，而因访问 NodeList 导致的问题为多。NodeList 对象都是“动态的”，这就意味着每次访问 NodeList 对象，都会运行一次查询。有鉴于此，好的办法就是尽量减少DOM操作。
DocumentType类型 DocumentType 类型在 Web 浏览器中并不常用，仅有 Firefox、Safari和 Opera支持它①。Document- —————————— ① Chrome 4.0也支持 DocumentType 类型。 图灵社区会员 StinkBC([email protected]) 专享 尊重版权10.1 节点层次 275 1 2 3 4 5 13 6 7 8 9 10 11 12 Type 包含着与文档的 doctype有关的所有信息，