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();
DOM2和DOM3分为多个模块:
1. DOM2级核心(DOM Level 2 Core):在1级核心基础上构建,为节点添加了更多方法和属性.
2. DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图
3. DOM2级事件(DOM Level 2 Events):说明了如何使用事件与DOM文档交互
4. DOM2级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS样式信息.
5. DOM2级遍历和范围(DOM Level 2 Traversal and Range):引入了遍历DOM文档和选择其特定部分的新接口.
6. DOM2级HTML(DOM Level 2 HTML):在1级HTML基础上构建,添加了更多属性,方法和新接口.
确定浏览器是否支持DOM模块:
var supportDOM2Core = document.implementation.hasFeature("Core", "2.0");
var supportDOM3Core = document.implementation.hasFeature("Core", "3.0");
var supportDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
var supportDOM2Views = document.implementation.hasFeature("Views", "2.0");
var supportDOM2XML = document.implementation.hasFeature("XML", "2.0");
2. 样式
在HTML中定义样式的方式有3种:通过<link/>元素包含外部样式表文件,使用<style/>元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式.DOM2级样式提供了多个API,可以通过下列代码测试CSS的能力:
var supportDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
1. 访问元素的样式
针对style属性进行改变:但是css的属性名必须转换为驼峰大小写形式(background-image--->backgroundImage):
<body>
<div id="content">
<p>This is <strong>paragraph</strong> wit a list following it.</p>
<p>this is a test.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script type="text/javascript">
var myDiv = document.getElementById("content");
//设置背景颜色
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";
</script>
</body>
1. DOM样式属性和方法
cssText:通过它能够访问到style特性中的CSS代码
length:应用给元素的CSS属性的数量
parentRule:表示CSS信息的CSSRule对象.
getPropertyCSSValue(propertyName):返回包含给定属性值的CSSValue对象
getPropertyPriority(propertyName):如果给定的属性使用了!important设置,则返回"important";否则,返回空字符串
getPropertyValue(propertyName):返回给定属性的字符串值
item(index):返回给定位置的CSS属性的名称
removeProperty(propertyName):从样式中删除给定属性
setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先权标志("important"或者一个空字符串)
1. cssText会写模式下,会重写整个CSS样式:
<body>
<div id="content">
<p>This is <strong>paragraph</strong> wit a list following it.</p>
<p>this is a test.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script type="text/javascript">
var myDiv = document.getElementById("content");
var myCssText = myDiv.style.cssText;
print(myCssText); //为空
myDiv.style.cssText = "width: 125px;height: 100px; background-color: green";
</script>
</body>
浏览器显示如下:
2. length,item和getPropertyValue配合使用
<body>
<div id="content">
<p>This is <strong>paragraph</strong> wit a list following it.</p>
<p>this is a test.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script type="text/javascript">
var myDiv = document.getElementById("content");
var myCssText = myDiv.style.cssText;
print(myCssText); //为空
myDiv.style.cssText = "width: 125px;height: 100px; background-color: green";
print("<br /><br /><br /><br /><br /><br /><br />")
print("the style property:");
var prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //===myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
print(prop + " : " + value);
}
</script>
</body>
浏览器显示如下:
而我们可以通过removeProperty来删除属性:
myDiv.style.removeProperty("border");
2. 计算的样式
虽然style对象能够提供支持style特性的任何元素的样式信息,但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息.DOM2级样式增强了document.defaultView,提供了getComputedStyle()方法,此方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(不需要就置空):
<style type="text/css">
#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black">hello world</div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
</script>
而firebug显示如下:
但是IE中没有此方法,所以我们需要修改如下:
var computedStyle = myDiv.currentStyle;
2. 操作样式表
CSSStyleSheet为通用的类型,只表示样式表:
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");
它继承自StyleSheet,所继承的属性如下:
1. disabled:表示样式表是否被禁用.这个属性是可读/写的,将这个值设置为true可以禁用样式表.
2. href:如果样式表是通过<link>包含的,则是样式表的URL;否则为null.
3. media:当前样式表支持的所有媒体类型的集合.
4. ownerNode:指向拥有当前样式表的节点的指针,样式表可能是在HTML中通过<link>或<style>引入的.
5. parentStyleSheet:在当前样式表是通过@import导入的情况下,这个属性是一个指向导入它的样式表的指针.
6. title:ownerNode中title属性的值.
7. type:表示样式表类型的字符串.对CSS样式表而言,这个字符串是"type/css".
CSSStyleSheet扩展的属性为:
1. cssRules:样式表中包含的样式规则的集合.
2. ownerRule:如果样式表是通过@import导入的,这个属性就是一个指针,指向表示导入的规则,否则,为null.
3. deleteRule(index):删除cssRules集合中指定位置的规则.
4. insertRule(rule, index):向cssRules集合中指定位置插入rule字符串.
我们可以遍历其属性:
var sheet = null;
for (var i = 0, len = document.styleSheets.length; i < len; i++) {
sheet = document.styleSheets[i];
print(sheet.href);
}
也可以直接通过<link>或<style>元素取得CSSStyleSheet对象.DOM提供sheet,但是IE不支持,IE提供styleSheet:
function getStyleSheet(element) {
return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);
1. CSS规则
CSSStyleRule类型:表示样式信息,包含下列属性:
1. cssText:返回整条规则对应的文本.
2. parentRule:如果当前规则是导入的规则,这个属性引用的就是idaoru规则,否则为null.
3. parentStyleSheet:当前规则所属的样式表.
4. selectorText:返回当前规则的选择符文本.
5. style:一个CSSStyleDeclaration对象,可以通过它设置和取得规则中特定的样式值.
6. type:表示规则类型的常量值.对于样式规则,这个值是1.
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules Example</title>
<style type="text/css">
div.box {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
<script type="text/javascript">
function getStyleInfo(){
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
alert(rule.selectorText);
alert(rule.style.cssText);
alert(rule.style.backgroundColor);
alert(rule.style.width);
alert(rule.style.height);
}
function changeStyleInfo(){
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
rule.style.backgroundColor = "red";
}
</script>
</head>
<body>
<div class="box" style="margin-bottom: 10px"></div>
<div class="box"></div>
<input type="button" value="Get Style Info" onclick="getStyleInfo()">
<input type="button" value="Change Style Info" onclick="changeStyleInfo()">
</body>
</html>
2. 创建规则和删除规则
DOM规定使用insertRule()方法,而IE不支持,提供addRule()方法.对于删除规则,DOM规定deleteRule(),IE不支持,提供removeRule():
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules Example</title>
<style type="text/css">
div.box {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
<script type="text/javascript">
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule){
sheet.addRule(selectorText, cssText, position);
}
}
function deleteRule(sheet, index){
if (sheet.deleteRule){
sheet.deleteRule(index);
} else if (sheet.removeRule){
sheet.removeRule(index);
}
}
function addNewRule(){
var sheet = document.styleSheets[0];
insertRule(sheet, "body", "background-color: silver;", 0);
//Note: Opera < 9.5 doesn't add the rule in the correct location
}
function removeFirstRule(){
var sheet = document.styleSheets[0];
deleteRule(sheet, 0);
}
</script>
</head>
<body>
<div class="box"></div>
<input type="button" value="Add CSS Rule" onclick="addNewRule()">
<input type="button" value="Remove CSS Rule" onclick="removeFirstRule()">
</body>
</html>
3. 元素大小
1. 偏移量
我们需要知道某个元素在页面上的偏移量,则需要如此编写代码:
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
2. 客户区大小
我们可以如此编码获取其客户区的大小:
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
};
}
}
3. 滚动大小
有四个属性关联到滚动大小:
1. scrollHeight:在没有滚动条的情况下,元素内容的总高度
2. scrollWidth:在没有滚动条的情况下,元素内容的总宽度.
3. scrollLeft:被隐藏在内容区域左侧的像素数.通过设置这个属性可以改变元素的滚动位置
4. scrollTop: 被隐藏在内容区域上方的像素数.通过设置这个属性可以改变元素的滚动位置.
4. 确定元素的大小
通过getBoundingClientRect()方法达到:
3. 遍历
DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历的DOM结构类型:NodeIterator和TreeWalker,IE不支持,它们都是深度优先遍历.可以使用以下代码检查浏览器是否支持DOM2级遍历能力.
var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
javascript--12DOM2、DOM3
猜你喜欢
转载自zhyp29.iteye.com/blog/2304348
今日推荐
周排行