编程 Javascript

JavaScript高级程序设计 DOM学习笔记

Posted in Javascript onSeptember 10, 2011

第十章 DOM
DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
1. 节点层次
1) 文档节点：document，每个文档的根节点。
2) 文档元素：即<html>元素，文档最外层元素，文档节点第一个子节点。
3) Node类型：
①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。
□ 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);
每种节点的nodeType属性返回上述类型之一，为一常量。
通过节点nodeType属性与数字值比较，可得节点类型。
②nodeName和nodeVlue属性。
③每个节点的子节点信息保存在childNodes属性中，childNodes属性中保存一个NodeList对象。
□ NodeList对象，类数组对象，有length属性，但非Array的实例。
□ 访问NodeList中的节点，可以通过方括号，也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 将NodeList转为数组对象。
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非IE
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
④parentName属性：指向文档树中父节点。
⑤previousSibling属性和nextSibling属性：前一个/下一个同胞节点。
⑥firstChild属性和lastChild属性：前一个/后一个子节点。
⑦hasChildNodes()方法：含子节点返回true，反之返回false。
⑧appendChild()方法：向childNodes列表末尾添加一个子节点，返回新增节点。
⑨insertBefore()方法：两个参数：要插入的节点和作为参照的节点。返回新增节点。
⑩replaceChild()方法：两个参数：要插入的节点和要替换节点。返回新增节点。
⑾removeChild()方法：移除节点。
⑿cloneNode()方法：接受一个布尔值。true为深复制，复制节点及子节点。false为浅复制，仅复制本身节点。
⒀nomalize()方法：处理文档树中文本节点。
4) Document类型（针对document对象）
①Document类型表示文档，是HTMLDocument类型的一个实例，表示整个HTML页面。document对象是window对象的一个属性，可作全局对象访问。
②documentElement属性；该属性始终指向HTML页面中的<html>元素。
③body属性；直接指向<body>元素。
④doctype属性：访问<!DOCTYPE>，各浏览器支持不一致。用处有限。
⑤title属性：可获得和设置title的文本。
⑥URL属性：地址栏中的URL。
⑦domain属性：页面的域名（可设置，有限制）
⑧referrer属性：保存链接到当前页面的那个页面的URL
⑨getElementById()方法：传入元素的ID，返回元素节点。
⑩getElementsByTagName()方法：传入元素名，返回NodeList。
□ 在HTML中返回一个HTMLCollection对象，与NodeList类似。
□ 访问HTMLCollection对象：方括号语法，item()方法，namedItem()方法，HTMLCollection对象还可通过元素的name特性取得集合中的项。
⑾getElementsByName()方法：返回带有给定name特性的所有元素。
⑿特殊集合，这些集合都是HTMLCollection对象。
□ document.anchors:包含文档中所有带name特性的<a>元素。
□ document.applets:包含文档中所有的<applet>元素。
□ document.forms:包含文档中所有的<form>元素。
□ document.images:包含文档中所有的<img>元素。
□ document.links:包含文档中所有带href属性的<a>元素。
⒀DOM一致性检测：document.implementation属性就为此提供相应信息和功能的对象。
□ 此对象有一个方法：hasFeature()：两个参数：要检测的DOM功能的名称及版本号。
□ 功能：Core、XML、HTML、Views、StyleSheets、CSS、CSS2、Events、UIEvents、MouseEvents、MutationEvents、HTMLEvents、Range、Traversal、LS、LS-Async、Validation
⒁将输出流写入网页：write()、writeln()、open()和close()。
5) Element类型
①用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
②可用nodeName属性或tagName属性访问元素标签名。tagName会在HTML中返回大写标签名，在XML中会原样返回。
（1）HTML元素
■所有HTML元素都由Element类型子类HTMLElement类型表示，其属性如下：
□id：元素在文档中的唯一标识符。
□title：有关元素的附加说明信息，一般通过工具提示条显示出来。
□lang：元素内容的语言代码，很少使用。
□dir：语言的方向，值为“ltr”或“rtl”，很少使用。
□className：与元素的class特性对应，即为元素指定的css类。
上述这些属性都可以用来取得或修改相应的特性值。
（2）取得特性
①getAttribute()方法：可以取得公认特性和自定义特性的值。
□任何元素的所有特性，也可以通过DOM元素本身的属性来访问。alert(div.id);alert(div.align);
□只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。
□style特性通过getAttribute()访问得特性值CSS文本。通过属性访问得一个对象。
□onclick特性：getAttribute()，返回JS代码字符串。通过属性访问返回一个函数。
□一般通过属性取得特性，只有在取自定义特性值时，才用getAttribute()。
（3）设置特性
①setAttribute()：两个参数，要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。
□此方法既可以操作HTML特性也可以操作自定义特性。
□所有公认特性都是属性，因此直接给属性赋值可以设置特性的值。
□IE6、IE7中，setAttribute()设置class、style，事件处理程序会每没有任何效果。但不建议通过属性设置特性。
②removeAttribute()：彻底删除元素的特性（IE6不支持）。
（4）attributes属性
①此属性包含一个NameNodeMap对象（类似NodeList的“动态”集合）。元素的每一个特性有一个Attr节点表示，每个节点保存在NameNodeMap对象中。
□getNameItem(name)：返回返回nodeName属性等于name的节点
□removeNameItem(name)：从列表中移除nodeName属性等于name的节点。
□setNameItem(node)：向列表中添加节点，以节点的nodeName属性为索引。
□item(pos)：返回位于数字pos位置的节点。
（5）创建元素
①使用document.createElement()方法可以创建新元素。参数：标签名。
②IE中createElement()可传入完整的元素标签，防止IE7以及IE6问题：
□不能设置动态创建的<iframe>元素的name特性
□不能通过表单的reset()方法重设动态创建的<input>元素。
□动态创建的type特性值为“reset”的<button>元素重设不了表单。
□动态创建的一批name相同的单选按钮彼此毫无关系。
if(client.browser.ie&&client.brower.ie<=7){
var iframe = document.createElement("<iframe name = \"myframe\"></iframe>");
}
（6）元素的子节点
①元素的childNode属性中包含了它的所有子节点：元素、文本节点、注释或处理指令。
□一般浏览器解析childNodes时会把元素节点空间的空白符解析为文本节点，而IE不会。因此遍历执行操作需要检查nodeType属性。
For(var i= 0, len = element.childNode.length; i> len; i++){
If(element.childNodes[i].nodeType == 1){
//执行某些操作
}
}
□元素节点支持getElementByTagName()方法。
6) Text类型
①文本节点由Text类型表示，包含纯文本内容，不含HTML代码。
□不支持（没有）子节点
□nodeValue属性、data属性可访问Text节点中包含的文本。
②操作文本节点
□appendData(text)：将text添加到节点的末尾。
□deleteData(offset,count)：从offset位置开始删除count个字符。
□insertData(offset,text)：在offset位置插入text；
□replaceData(offset,count,text)：用text替换从offset指定的位置开始到offset+count为止处的字符串。
□splitText(offset)：从offset指定位置将当前文本节点分成两文本节点。
□substringData(offset,count)：提取offset指定的位置开始到offset+count为止处的字符串。
□文本节点有一个length属性，保存节点中字符的数目。而nodeValue.length和data.length中也保存着同样的值。
○修改文本节点值时字符串经HTML编码，特殊符号转义：
div.firstChild.nodeValue = "Some<strong>other</strong>"; //输出Some<Strong>other</strong>
③创建文本节点
□使用document.createTextNode()创建新文本节点。参数：要插入的文本（自动按HTML或XML格式编码）
④规范化文本节点
□DOM操作中可向同一父元素插入多个文本节点，但会造成混乱。
□通过node类型继承的normalize()方法可合并同一父元素上的所有文本节点。
⑤分割文本节点
□Text类型方法splitText()：与node方法normalize()相反传入一个位置参数，从该位置拆分成两个文本节点，返回后面的文本节点。
□分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。
7) Comment类型
□Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外所有字符串操作方法。
□可使用document.createComment()创建注释节点。
8) CDATASection类型
□CDATASection类型只针对基于XML的文档表示CDATA区域。
□CDATASection类型继承自Text类型，拥有除splitText()之外所有方法。
□各大浏览器均无法正确解析这种类型。
9) DocumentType类型
□IE不支持
□在DOM1级中DocumentType对象不能动态创建。
□DocumentType对象保存在document.doctype中。
◇name属性：文档类型名称。
◇entities属性：文档类型描述的实体的NamedNodeMap对象。
◇notation属性：文档类型描述的符号的NamedNodeMap对象。
10) DocumentFragment类型
□DOM规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。
□文档片段不能添加到文档中，只会添加文档片段作为“仓库”保存的节点。
var fragment = document.createDomFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i= 0; i<3; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("haha"));
fragment.appendChild(li);
}
ul.appendChild.appendChild(li);
□可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。
11) Attr类型
□是节点，但特性不被认为是DOM文档树的一部分。很少使用这类节点。
□Attr对象3个属性：
◇name属性：特性名称（如nodeName）
◇value属性：特性的值（如nodeValue）
◇specified属性：布尔值，用以区别特性是在代码中指定的还是默认的。
□不建议直接访问特性节点。建议用getAttribute()
setAttribute()、removeAttribute()方法。0

二、DOM扩展
1. 呈现模式
①document对象的compatMode属性
□值为“CSS1Compat”即标准模式。
□值为“BackCompact”即混杂模式。
②IE8为document对象引入documentMode新属性，返回数值：5（混杂模式）、7（仿真模式）、8（标准模式）
2. 滚动
□滚动方法都是作为HTMLElement类型的扩展存在，可再元素节点上使用。
□scrollIntoView(bool)：滚动浏览器窗口或容器元素，以便在视口（viewport）中看到元素。（参数为true或省略，则滚动到顶部）。
□scrollIntoViewIfNeeded(bool)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，让当前元素可见。（Safari和Chorme实现）。
□scrollByLines(lineCount)：将元素的内容滚动指定的行数的高度，lineCount可为正/负数。（safari和Chrome可用）
3. children属性
□children属性中只包含元素的子节点中那些也是元素的节点。
□作为HTMLCollection对象。
□Firefox不支持，IE中的children集合会包含注释节点。
4. contains()方法
□应在作搜索起点的祖先节点上调用，传入要检测的节点作参数。返回true则传入节点作为当前节点后代。
□Firefox不支持contains()方法，在DOM3级实现替代的compareDocumentPosition()方法，确定两个节点间关系。Safari2.x以下版本不支持。
兼容各浏览器代码：
function contains(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit >=552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition =="function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node === refNode){
Return true;
}else{
node = node.parentNode;
}
}while(node !== null);
return false;
}
}
5. 操作内容
①innerText属性
□可读取节点文档书中由浅入深的所有文本。
□通过inner.Text属性设置节点文本，会移除先前存在的所有子节点，完全改变了DOM树。
□赋给此属性的文本将自动进行HTML编码。
□Firefox不支持innerText，但支持作用类似的textContent属性。
□innerText：支持IE、Safari、Opera、Chrome
□textContent：支持Safari、Firefox、Opera、Chrome
兼容代码：
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent:element.innerText;
}

第十一章 DOM2和DOM3
一、DOM变化
1. 针对XML命名空间的变化
①Node类型的变化
■DOM2级中，Node类型包含下列特定于命名空间的属性。
□localName：不带命名空间前缀的节点名称。
□namespaceURI：命名空间URI，未指定则为null。
□prefix：命名空间前缀，未指定则为null。
■DOM3级
□isDefaultNamespace(namespaceURI)：指定的namespaceURI在当前的默认命名空间的情况下返回true。
□lookupNamespaceURI(prefix)：返回给定prefix的命名空间。
□lookupPrefix(namespaceURI)：返回给定namespaceURI的前缀。
②Document类型变化
■DOM2级中，与命名空间有关
□createElementNS(namespaceURI, tagName)：使用给定的tagName创建一个属于命名空间namespaceURI的新元素。
□createAttributeNS(namespaceURI, attributeName)：
□getElementBytagNameNS(namespaceURI, tagName)：
③Elment类型的变化
■DOM2级核心中
□getAttributeNS(namespaceURI, localName)
□getAttributeNodeNS(namespaceURI, localName)
□getElementsByTagNameNS(namespaceURI, localName)
□hasAttributeNS(namespaceURI, localName)
□removeAttributeNS(namespaceURI, localName)
□setAttributeNodeNS(attrNode)：设置属于命名空间namespaceURI的特性节点。
④NamedNodeMap类型的变化
□getNamedItemNS(namespaceURI, localName)
□removeNamedItemNS(namespaceURI, localName)
□setNamedItemNS(node)：添加node，这个节点已事先指定了命名空间信息。
2. 其他方面的变化
①DocumentType类型的变化
□新增3个属性：publicId、systemId和internalSubset
□publicId、systemId表示文档类型声明中的两个信息段。
□internalSubset：用于访问包含在文档类型声明中的额外定义。
②Document类型的变化
□importNode()方法：从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为文档结构的一部分。
◇每个节点都有一个ownerDocument属性，表示所属文档。
◇appendChild()传入节点属于不同文档，会导致错误。
◇importNode()方法与Element的cloneNode方法非常相似，接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。返回原节点的副本，但能够在当前文档中使用。
□defaultView属性：保存着一个指针，指向拥有给定文档的窗口（或框架）。
◇IE不支持此属性，但有等价属性parentWindow。
◇确定文档归属窗口兼容代码：
var parentWindow = document.defaultView || document.parentWindow;
□createDocuemntType()：创建一个新的DocumentType节点，接受三个参数：文档类型名称、publicId、systemId。
□createDocument()方法：创建新文档。三个参数：针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。
□“DOM2级HTML”模块为document.implementation新增一个方法，名叫createHTMLDocument()。只接受title中的文本作为参数。返回新HTML文档。包括<html>、<head>、<title>和<body>。
③Node类型的变化
□isSupported()方法：与DOM1级中document.implementation引入的hasFeature()方法类似。用于确定当前节点具有什么能力。两个参数：特性名和特性版本号。
□isSameNode()方法：传入节点，与引用节点为同一个节点则返回true。
□isEqualNode()方法：传入节点，与引用节点相等返回true。
□setUserData()方法：将数据指定给节点。三个参数：要设置的键，实际的数据和处理函数。
◇处理函数接受5个参数：表操作类型的数值（1复制2导入3删除4重命名）、数据键、数据值、源节点和目标节点。
var div = document.createElement("div");
div.setUserData("name","Nicholas",fucntion(operation, key, value, src, dest){
if(operation == 1){
dest.setUserData(key,value);
}
});
④框架的变化
□框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示。
□contentDocument属性：DOM2级中框架、内框架的新属性。此属性包含一个指针，指向表示框架内容的文档对象。
□contentDocument属性是Document类型实例，因此可以像使用其他HTML文档一样使用它，包括所有属性和方法。
□IE8之前不支持框架中的contentDocument属性，但支持一个叫contentWindow属性，返回框架的window对象。
□访问内嵌框架文档对象兼容代码：
var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
二、样式
1. 访问元素的样式
①style属性
□支持style特性的HTML元素在JS中都有一个对应的style属性。
□这style对象是cssStyleDeclaration的实例，包含通过style特性指定的样式。
□在style特性指定的任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线的CSS属性名，必须转换成驼峰大小写形式才能通过js访问。其中float属性不可直接使用。IE用styleFloat访问，其他浏览器用cssFloat访问。
□如果没有为元素设置style特性，那style对象中可能会包含一些默认值，但这些值不反映元素正确的样式信息。
②DOM样式属性和方法
1）DOM2级还为style对象定义了一些属性和方法。在提供特性值时也可修改样式。
□cssText：访问style特性中的css代码。
□length：应用给元素的css属性数量。
□parentRule：表示css信息的CSSRule对象。
□getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue对象，含两个属性cssText和cssValueType。
□getProperytPriority(propertyName)：如果给定的属性使用了!important设置，则返回“important”，否则返回空字符串。
□item(index)：返回给定位置的CSS属性的名称。
□removeProperyt(propertyName)：从样式中删除给定属性。
□setProperty(propertyName, value, priority)：将给定属性设置为相应的值，并加上优先权标志（“important”或者一个空字符串）。
2）使用
□设计length属性的目的，就是将其与item()方法配套使用。以便迭代元素中定义的css属性。
□Firefox、Safari、Opera9及更高、chrome均支持这些属性和方法。IE只支持cssText。
□getPropertyCSSValue()只有Safari和chrome支持。
③计算的样式
□“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。
□getComputedStyle()：2个参数：要取得计算样式的元素和一个伪元素字符串（如:after）。如果不需要伪元素信息，第二个参数可以为null。返回一个CSSStyleDeclaration对象（与style属性类型相同）。
□IE不支持getComputedStyle()方法。但IE中有style特性的元素均有一个currentStyle属性（CSSStyleDeclaration的实例）包含当前元素全部计算后的样式。
□计算样式兼容代码：
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(mydiv, null) || myDiv.currentStyle;
alert(computedStyle.width);
alert(computedStyle.height);
2. 操作样式表
①CSSStyleSheet类型
1）操控<link>元素样式表和<style>元素样式表。
2）确定浏览器是否支持DOM2级样式表。
var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheet","2.0");
3）CSSStyleSheet继承自StyleSheet，后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下：
□disabled：表示样式表是否被禁用的布尔值。可读/写。设为true则禁用。
□href：如果样式表是通过<link>包含的，则是样式表的URL，否则是null。
□media：当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，有length属性和item()方法。
□ownerNode：指向拥有当前样式表的节点的指针。若通过@import导入则属性为null。IE不支持此属性。
□parentStyleSheet：当前样式表是通过@import导入的情况下，这个属性指向导入它的样式表的指针。
□title：ownerNode中title属性的值。
□type：表示样式表类型的字符串。对css样式表而言，这个字符串是“type/css”。
■以上属性除disabled外，全部只读。
4）CSSStyleSheet在上述基础上添加以下属性和方法：
□cssRule：样式表中包含的样式规则的集合。IE不支持，但有类似的rules属性。
□ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则；否则为null。IE不支持这个属性。
□deleRule(index)：删除cssRules集合中指定位置的规则。IE不支持，但支持一类似的removeRule()方法。
□insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持，但支持类似的addRule()方法。
5）获取样式表对象
□应用于文档的所有样式表是通过document.styleSheets集合来表示的。通过这个集合的length属性可以获取文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表。
var sheet = null;
for(var i = 0, len = document.styleSheets.length; i < len; i++){
sheet = document.styleSheets[i];
alert(sheet.href);
}
□不同浏览器的document.styleSheets返回的样式表也不同。所有浏览器都会包含<style>元素和rel特性被设置为“stylesheet”的<link>元素引入的样式表。
□可直接通过<link>或<style>元素取得CSSStyleSheet对象。DOM规定了一个包含CSSStyleSheet对象的属性，名叫sheet；IE不支持，但IE支持类似的styleSheet属性。
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一个<link>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);
②CSS规则
1）CSSRule对象表示样式表中的每一条规则，是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。
2）CSSStyleRule对象包含下列属性：
□cssText：返回整条规则对应的文本，IE不支持。
□parentRule：如果当前规则是导入的规则，这属性引用的就是导入规则；否则这个值为null。IE不支持。
□parentStyleSheet：当前规则所属的样式表。IE不支持。
□selectorText：返回当前规则的选择符文本。
□style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。
□type：表示规则类型的常量值。对于样式规则，这个值是1。IE不支持。
■其中最常用的属性是cssText、selectorText和style。
□cssText属性与style.cssText属性类似但并不相同。前者包含选择符文本和围绕样式信息的花括号，后者只含样式信息（类似于元素的style.cssText）。而cssText只读，style.cssText可读/写。
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
alert(rule.style.backgroundColor);
rule.style.backgroundColor="red";
③创建规则
□insertRule()方法：接受两个参数：规则文本和表达在哪里插入规则的索引。//IE不支持
sheet.insertRule("body{background-color:silver}",0); //DOM方法。
□addRule()：IE中支持。两个必选参数：选择符文本和CSS样式信息。一个可选参数：插入规则的位置。//仅IE支持
Sheet.addRule("body","background-color:silver",0);
□跨浏览器兼容
function insertRule(sheet, selectorText, cssText, position){
if(sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}", position);
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
调用：insertRule(document.styleSheets[0], "body", "background-color:red", 0);
□当需要添加的规则多时，操作繁琐。建议采用动态加载样式表。
④删除规则
□sheet.deleteRule(0); //DOM方法，IE不支持
Sheet.removeRule(0); //IE方法，两者都是传入要删除的规则的位置。
□跨浏览器兼容：
function deleteRule(sheet, index){
if(sheet.deleteRule){
Sheet.deleteRule(index);
}else if(sheet.removeRule){
Sheet.removeRule(index);
}
}
调用方式：deleteRule(document.styleSheets[0],0);
□这种做法不是实际web开发中常见做法。删除规则会影响CSS层叠效果。慎用。
3. 元素大小（非DOM2级样式，但所有浏览器支持）
①偏移量（offset dimension）
定义：包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）
□offsetHeight：元素在垂直方向上占用的空间大小，以像素计。
□offsetWidth：元素在水平方向上占用的空间大小，以像素计。
□offsetLeft：元素左边框至包含的左内边框之间的像素距离。
□offsetTop：元素的上边框至包含元素的上内边框之间的像素距离。
△其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。
△这些属性是只读的，每次访问需要重新计算。若重复使用，应保存在局部变量中。
②客户区大小（client dimension）
元素内容及其内边距所占大小。滚动条占用空间不算在内。
□clientWidth属性：元素内容区宽度加上左右内边距宽度。
□clientHeight属性：元素内容区高度加上上下内边距高度。
□确定浏览器视口大小可用document.documentElement或document.body（IE6的混杂模式中）。
function getViewport(){
if(document.compatMode == "BackCompat"){
return{
width:document.body.clientWidth,
height:document.body.clientheight
};
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
}
③滚动大小
指包含滚动内容的元素的大小。
□scrollHeight：在没有滚动条的情况下，元素内容的总高度。
□scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
□scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
□scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
◇在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，保证跨浏览器。
Var docHeight = Max.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
Var docWidth = Max.max(document.documentElement.scrollWidth,document.docuemntElement.clientWidth);
注：对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement。
◇通过scrollLeft和scrollTop属性既可以确定元素当前的滚动状态，也可以设置元素滚动位置。
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
④确定元素大小
□IE、Firefox3及更高和Opera9.5及更高为每一个元素提供了一个getBoundingClientRect()方法。这个方法返回一个矩形对象，含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但IE认为左上角坐标为(2,2)，其他浏览器认为是(0,0)。
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;

if(element.getBoundingClientRect){
If(typeof arguments.callee.offset != "number"){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}

var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;

return{
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
}else{
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);

return{
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}

三、遍历
①概况：“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先（depth-first）的遍历操作。
□在与DOM兼容版本中可访问这些对象。IE不支持遍历。
□检查浏览器对DOM2级遍历能力的支持。
var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
②NodeIterator
1）可以使用document.createNodeIterator()方法创建它的新实例。
接受4个参数：
□root：想要作为搜索起点的树种的节点。
□whatToShow：表示要访问哪些节点的数字代码。
□filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数。
□entityReferenceExpansion：布尔值，表示是否要扩展实体引用。此参数在HTML页面中没有用。
■whatToShow参数是一个位掩码，其值以常量形式在NodeFilter类型中定义。
□NodeFilter.SHOW_ALL：显示所有类型的节点。
□NodeFilter.SHOW_ELEMENT：显示元素节点。
□NodeFilter.SHOW_ATTRIBUTE：显示特性节点。由于DOM结构原因，实际上不能使用这个值。
□NodeFilter.SHOW_TEXT：显示文本节点。
□NodeFilter.SHOW_CDATA_SECTION：显示CDATA节点。对HTML无用。
□NodeFilter.SHOW_ENTITY_REFERENCE：显示实体引用节点。对HTML无用。
□NodeFilter.SHOW_ENTITYPE：显示实体节点。对HTML无用。
□NodeFilter.SHOW_PROCESSING_INSTRUCTION：显示处理指令节点。对HTML无用。
□NodeFilter.SHOW_COMMENT：显示注释节点。
□NodeFilter.SHOW_DOCUMENT：显示文档节点。
□NodeFilter.SHOW_DOCUMENT_TYPE：显示文档类型节点。
□NodeFilter.SHOW_DOCUMENT_FRAGMENT：显示文档片段节点。对HTML无用。
□NodeFilter.SHOW_NOTATION：显示符号节点。对HTML无用。
◇除了NodeFilter_SHOW_ALL外，可以使用按位或操作符来组合多个选项。
var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
◇用filter参数自定义NodeFilter对象或一个过滤器函数。
NodeFilter对象只有一个方法，即acceptNode()，访问则放回NodeFilter.FILTER_ACCEPT，不访问则返回NodeFilter.FILTER_SKIP
例1：迭代器
var filter= {
acceptNode:function(node)P{
return node.tagName.toLowerCase()=="p" ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
}
};
var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
例2：filtr参数也可以是一个与acceptNode方法类似的函数。
var filter = function(node){
return node.tagName.toLowerCase() == "p" ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
2）NodeIterator类型主要两个方法：nextNode()和previousNode()。
var div = document.getElemetnById("div1");
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode();
while(node !== null){
alert(node.tagName);
node = iterator.nextNode();
}
③TreeWalker
1）TreeWalker是NodeIterator的一个更高级版本。除了有nextNode()和previousNode()外，还有下列用于在不同方向上遍历DOM结构的方法：
□parentNode()：遍历到当前节点的父节点。
□firstChild()：遍历到当前节点的第一个子节点。
□lastChild()：便历到当前节点的最后一个子节点。
□nextSibling()：遍历到当前节点的下一个同辈节点。
□previousSibling()：遍历到当前节点的上一个同辈节点。
2）创建TreeWalker对象要使用document.createTreeWalker()方法，接受4个参数，与document.createNodeIterator()方法相同。
□其中第3个参数filter返回值除了可以返回NodeFilter.FITER_ACCEPT和NodeFilter.FILTER_SKIP外，还可以使用NodeFILTER_REJECT（作用：跳过相应的节点及该节点的整个子树）。
□TreeWalker强大之处在于能够在DOM结构中沿任何方向移动。
◇例：遍历DOM树，即使不定义过滤器，也可以取得所有<li>元素。
var div = document.getElementById("div1");
var walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);
walker.firstChild();
walker.nextSibling();
var node = walker.firstChild();
while(node !== null)}
alert(node.tagName);
node = walker.nextSibling();
}
□TreeWalker类型还有一个属性，名叫currentNode，表示任何遍历方法在上一次遍历中返回的节点。
四、范围
基本定义：
通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户看不见）。在常规DOM操作中不能更有效地修改文档时，使用范围往往可以达到目的。
1.DOM中的范围
①概况：
1）DOM2级在Document类型中定义了createRange()方法。
□检查是否支持范围：
var supportsRange = document.implementation.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof document.createRange == "function");
□创建DOM范围: var range = document.createRange();
2）Range类型实例中，提供当前范围在文档中的位置信息的属性：
□startContainer：包含范围起点的节点（即选取中第一个节点的父节点）
□startOffset：范围在startContainer中起点的偏移量。如StartContainer是文本节点，则startOffset就是范围起点之前跳过的字符数量。否则，startOffset就是范围中第一个子节点在父节点中的索引。
□endContainer：包含范围终点的节点（即选取最后一个节点的父节点）。
□endOffset：范围在endContainer中终点的偏移量（规则如startoffset）
□commonAncestorContainer：startContainer和endContainer共同的祖先节点在文档树种位置最深的那个。
②用DOM范围实现简单选择：
1）使用范围选择文档中的一部分：
□selectNode()：传入一个DOM节点，选择整个节点，包括子节点作范围。
□selectNodeContents()：传入一个DOM节点，只选择子节点作范围。
2）更精细地控制范围：
□setStartBefore(refNode)：将范围的起点设置在refNode之前，因此refNode也就是范围选取中第一个子节点。范围的位置属性自动更新。
□setStartAfter(refNode)：
□setEndBefore(refNode)：
□setEndAfter(refNode)：
③用DOM范围实现复杂选择：
□setStart()：传入一个参照点和一个偏移量。参照节点成startContainer，而偏移量成startOffset。
□setEnd()：传入一参照点和一个偏移量。参照节点成endContainer，而偏移量成endOffset。
<p id="p1"><b>Hello</b> world!</p> //使用范围选择l到o。
var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode,2);
range.setEnd(worldNode,3);
④操作DOM范围中的内容
□在调用操作方法时，后台会为范围创建有效的文档片段及DOM结构。P275
□deleteContents()：从文档中删除范围所包含的内容。
□extractContents()：从文档中删除范围内容，返回范围文档片段。
⑤插入DOM范围中的内容
□insertNode()：向范围选区的开始处插入一个节点。
□surroundContents()：接受一个参数，即环绕范围内容的节点。
a.提取出范围中的内容（类似执行extractContent()）
b.将给定节点插入到文档中原来范围所在的位置上。
c.将文档片段的内容添加到给定节点中。
⑥折叠DOM范围
□所谓折叠范围，就是指范围中未选择文档的任何部分。
□collapse()方法：一个参数布尔值。true折叠到范围起点，false折叠到范围终点。可以用collapsed属性检查是否已经折叠。
range.collapse(true); //折叠到起点
alert(range.collapsed); //输出true
⑦比较DOM范围
在有多个范围的情况下，可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界（起点或终点）。两个参数：表示比较方式的常量和要比较的范围。
比较方式常量值：
□Range.START_TO_START(0)：比较第一个范围和第二个范围起点。
□Range.START_TO_END(1)：
□Range.END_TO_END(2)：
□Range.END_TO_STRAT(3)：
⑧复制DOM范围
□cloneRange()方法：var newRange = range.cloneRange();
⑨清理DOM范围
□调用detach()方法，从文档分离出范围。
range.detach(); //从文档中分离
range = null; //解除引用
2.IE中的范围
①概况：
□IE不支持DOM范围。支持类似的文本范围（text range）。
□文本范围处理的主要是文本（不一定是DOM节点）。通过<body>、<button>、<input>和<textarea>等元素调用createTextRange()方法。
□通过document创建的范围可以在页面中的任何地方使用。
var range = document.body.createTextRange();
②用IE范围实现简单选择
□findText()方法：找到第一次出现的给定文本，并将范围移过来以环绕该文本。返回布尔值，表示是否找到文本。
◇使用text属性可返回范围中文本。
var range = document.body.createTextRange();
var found = range.findText("Hello");
◇可为findText传入另一个参数，负值即当前位置向后搜，正值则向前搜。
□moveToElementText()方法：类似DOM中selectNode()方法。接受一个DOM元素，并选择该元素的所有文本，包括HTML标签。
◇范围可用htmlText属性取得范围全部内容，包括HTML。
③使用IE范围实现复杂选择
□4个方法：move()、moveStart()、moveEnd()、expand()；两个参数：移动单位和移动单位数量。移动单位为以下一种字符串：
◇"character"：逐个字符地移动。
◇"word"：逐个单词（一系列非空格字符地移动）
◇"sentence"：逐个句子（一系列句号、问好或感叹号结尾的字符地移动）
◇"textedit"：移到当前范围选取的开始或结束位置。
□moveStart()：移动到范围起点；moveEnd()移动到范围终点。
□expand()：将任何部分选择的文本全部选中。
□move()方法：首先会折叠当前范围（起点终点相等），然后将范围移动指定的单位数量。
④操作IE范围中的内容
□范围仅含文本可通过text属性读写文本。
□pasteHTML()方法：向范围插入HTML代码。
⑤折叠IE范围
□collapse()方法：传入布尔值，true折叠到起点，false折叠到终点。
□检查折叠是否完毕：boundingWidth属性等于0
var isCollapse = (range.boundingWidth == 0);
⑥比较IE范围
□compareEndPoints()方法：两个参数：比较类型和要比较的范围。
◇比较类型取值字符串：“startToStart”“StartToEnd”、“EndToEnd”和“EndToStart”。
◇如果第一个范围边界位于第二个前，返回-1；相等返回0；在后面返回1.
□isEquanl()用于确定两个范围是否相等。
□inRange()用于确定一个范围是否包含另一个范围。
⑦复制IE范围
使用duplicate()方法，复制文本范围，返回副本。
var newRange = range.duplicate();

JavaScript高级程序设计 DOM学习笔记

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在VS2008中使用jQuery智能感应的方法

Dec 30 Javascript

jQuery数据缓存功能的实现思路及简单模拟

May 27 Javascript

IE网页js语法错误2行字符1、FF中正常的解决方法

Sep 09 Javascript

toggle()隐藏问题的解决方法

Feb 17 Javascript

基于javascript实现图片懒加载

Jan 05 Javascript

Angularjs中UI Router全攻略

Jan 29 Javascript

JavaScript 函数模式详解及示例

Sep 07 Javascript

JavaScript用200行代码制作打飞机小游戏实例

Jun 21 Javascript

vue使用技巧及vue项目中遇到的问题

Jun 04 Javascript

小程序云开发部署攻略(图文教程)

Oct 30 Javascript

vue使用微信扫一扫功能的实现代码

Apr 11 Javascript

最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

Jul 17 Javascript

jquery maxlength使用说明

Sep 09 #Javascript

基于jquery可配置循环左右滚动例子

Sep 09 #Javascript

jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

Sep 09 #Javascript

详谈 Jquery Ajax异步处理Json数据.

Sep 09 #Javascript

$.ajax返回的JSON无法执行success的解决方法

Sep 09 #Javascript

yepnope.js 异步加载资源文件

Sep 08 #Javascript

jquery绑定原理简单解析与实现代码分享

Sep 06 #Javascript