DOM2和DOM3

一，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");
1，针对XML命名空间的变化
　　HTML不支持XML的命名空间，
　　1）node类型中的变化
　　DOM2级，node类型包含下列特定于命名空间的属性
　　localName:不带命名空间前缀的节点名称
　　namespaceURI：命名空间前缀的节点名称，不存在时为null
　　prefix：命名空间前缀，不存在时为null
　　使用了命名空间前缀时，nodeName = prefix + ":" + localName
　　<s:svg xmlns:s="http://www.w3.org/2000/svg"></s:svg>
　　s为prefix，namespaceURI为http://www.w3.org/2000/svg，localName为svg
　　DOM3在此基础上添加了新的方法
　　isDefaultNamespace(namespaceURI)，在指定的namespaceURI是当前节点的默认命名空间的情况下返回true
　　lookupNamespaceURI(prefix)，返回给定的prefix的命名空间
　　lookupPrefix(namespaceURI)，返回给定命名空间namespaceURI的前缀prefix
　　2）Document类型的变化
　　DOM2级中document类型包含下列与命名空间相关的方法
　　var SVG = document.createElementNS(namespaceURI,tagname),用给定的tagName元素名创建属于命名空间namespaceURI的新元素
　　var att = document.createAttributeNS(namespaceURI,attributeName),用给定的特性名，创建属于命名空间namespaceURI的新特性
　　var elems = document.getElementsByTagName(namespaceURI,tagName)，返回属于namespaceURI命名空间的所有tagName元素
　　只有文档中包含两个文档时，这些命名空间相关的方法才必须的
　　3）Element类型的变化
　　getAttributeNS(namespaceURI,localName),取得属于namespaceURI命名空间，且名为localName的属性
　　getAttributeNodeNS(namespaceURI,localName),取得属于namespaceURI命名空间，名为localName的属性节点
　　getElementsByTagName(namespaceURI,tagName),取得命名空间，tagName元素的NodeList节点
　　hasAttributeNS(namespaeURI,localname),确定当前元素在当前的命名空间中是否有localName的特性
　　removeAttributeNS(namespaceURI,localName)，移除namespaceURI命名空间的localName特性
　　setAttributeNS(namespaceURI,qualifiedName,value)，设置命名空间namespaceURI中的名为qualifiedName的特性的值为value
　　setAttributeNodeNS(attribute),设置命名空间namespaceURI中的特性节点
　　4）NamedNode类型的变化
　　getNamedItemNS(namaspaceURI,localName)，取得属于命名空间namespaceURI且名为localName的特性的项
　　removeNamedItemNS(namespaceURI,localName)，移除属于命名空间namespaceURI且名为localName的特性项
　　setNamedItemNS(node)，添加node，这个节点已经事先指定了命名信息
2，其他方面的变化
　　1）DocumentType的变化
　　新增三个属性，publicId，systemId，internalSubset
　　前两个表示文档声明中的两个信息段
　　<!DOCTYPE HTML　PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　　document.doctype.publicId = "-//W3C//DTD HTML 4.01//EN"
　　document.doctype.systemId = "http://www.w3.org/TR/html4/strict.dtd"
　　internalSubset用于访问文档声明中额外定义
　　2）Document类型的变化
　　importNode(),从一个文档中取得一个节点，放到另一个文档中，成为另一个文档结构的一部分
　　接收两个参数，另一个文档中的目标节点，和一个是否复制其子节点的布尔值
　　var newNode = document.importNode(antherNode,true);
　　document.body.appendChild(newNode);
　　defaultView属性，指向拥有给定文档的窗口，IE中等价的属性为parentWindow
　　确定文档的归属窗口，var parentWindow = document.defaultView || document.parentWindow;
　　DOM2核心，为document.implementation对象添加了两个新方法，
　　createDocumentType(),用于创建新的documenType节点，接收三个参数，文档类型名称，publicId，systemId
　　var doctype = document.implementation.createDocumentType("html","-//W3C//DTD HTML 　　　　　　　　　　　　　　　4.01//EN","http://www.w3.org/TR/html4/strict.dtd");
　　createDocument(),用于创建新的文档，接收三个参数，针对文档中元素namespaceURI，文档元素的标签名，新文档的文档类型
　　var doc = document.implementation.createDocument("","root",null);
　　DOM2级html也为document.implementation对象添加了新方法
　　createHTMLDocument(),用于创建一个完整的HTML文档，包括<html>,<head>,<title>,<body>元素
　　只接收一个参数，即创建文档的标题title元素中的字符串，返回新的html文档
　　var htmlloc = document.implementation.creatHTMLDocument("my doc");
　　3）Node类型的变化
　　isSupported()，用于确定当前节点拥有什么能力，接收两个参数，版本名和版本号
　　DOM3级引入两个辅助比较节点的方法isSameNOde(),isEqualNode(),都接收一个参数，在传人节点和引用节点相同和相等时返回true
　　setUserData()，将数据指定给节点，接收三个参数（设置的键，实际的数据，和处理函数）
　　处理函数接收5个参数，表示操作类型的值（1表示复制，2表示导入，3表示删除，4表示从命名），数据键，数据值，源节点，和目标节点
　　通过getUserData(),传人相同的键获取设置的值

　　var div = document.createElement("div");
　　div.setUserData("name","Nicholas",function(operation,key,value,src,dest){
　　　　if(operation == 1){
　　　　　　dest.setUserData(key,value,function(){});
　　　　}
　　});
　　var newDIv = div.cloneNode(true);
　　alert(newDIv.getUserData);

　　4）框架的变化
　　框架HTMLFrameElement和内联框架HTMLIFrameElement
　　属性contentDocument属性包含一个指针，指定表示框架内容的文档对象
　　IE中等价的属性为contentWindow属性
　　var iframe = iframe.contentDocument || iframe.contentWindow.document
二，样式
var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2,0");
1，访问元素的样式
　　css中的样式与javascript的样式名一一对应
　　1）DOM样式属性和方法
　　DOM2级样式规范给style对象定义了属性和方法
　　cssText：通过它能访问到style特性中的css代码
　　length：给定元素的css属性的数量
　　parentRule：css信息的cssRule对象
　　getPropertyCSSValue(propertyName)：返回包含给定属性值的cssRule对象
　　getPropertyPriority(propertyName)：如果给定属性使用了！improtant设置，返回"important"，否则返回空字符串
　　getPropertyValue(propertyName)：返回给定属性的字符串
　　item(index)：返回给定位置的css属性的名称,通过length一一获取，可以使用[]方法
　　removeProperty(propertyName)：移除给定属性
　　setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志(improtant)
　　使用getPropertyCSSValue(propertyname)，返回一个CSSValue对象，包含两个属性cssText和cssValueType
　　cssText属性的值与getPropertyvalue()返回值相同，属性值的字符串值，cssValueType属性是一个数值常量（0表示继承的值，1表示基本的值，2表示值列　　表，3表示自定义的值）
　　2）计算的样式
　　style对象只能获取style属性的样式信息，不能获取从其他样式表折叠而来的样式信息
　　DOM2级增强了document.defaultView，提供了getComputedStyle()方法，接收两个参数,要取得计算样式的元素和一个伪元素字符串(如:after),不需要设　　为null
　　返回一个CSSStyleDelaration对象，包含当前元素的所有计算的样式
　　var computedStyle = document.defauleView.getComputedStyle("div1",null);如此就可以获取div1元素的所有外部计算样式
　　IE中等价的属性currentStyle 是CSSStyleDeclaration的实例
　　var computedStyle = document.currentStyle;
　　所有的计算的样式都是只读的，不能修改计算后样式对象中的CSS属性
2，操作样式表
　　CSSStyleSheet类型表示样式表，
　　var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");
　　CSSStyleSheet继承自StyleSheet，StyleSheet可以作为一个基础接口来定义非CSS样式表，从StyleSheet接口继承而来的属性如下
　　disabled:表示样式表是否被禁用的布尔值，是可读写的，可以禁用设为true
　　href：如果样式表通过link添加的，则值为样式表的URL，否则为null
　　media：当前样式支持的所有媒体类型的集合，也有一个length属性，通过item或[]获取每一项，如果集合为空，适用于所有媒体，IE中media反映link和style　　　标签media特殊值的字符串
　　ownerNode：指向拥有当前样式表的节点的指针，样式表可以通过link或style添加，如果是其他样式通过@import导入的，为null，IE不支持
　　parentStyleSheet：当前样式通过@import导入时，这个属性是一个指向导入它的样式表的指针
　　title：ownerNode中title属性的值
　　type：表示样式表类型的字符串，对应css样式来说，为text/css
　　cssRules：样式表中包含的样式规则的集合
　　ownerRule(index):如果样式通过@import导入，包含一个指针，指向导入的规则，否则为null，IE不支持
　　deleteRule(index):删除cssRules集合中指定位置的规则，IE中等价的方法removeRule()方法
　　insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串，IE中等价的方法addRule()方法
　　应用与文档的所有样式表是通过document.styleSheets集合来表示的，通过length属性来获知文档中样式表的数量通过[]和item()获取每一项
　　直接通过link或style元素取得CSSStyleSheet对象，DOM规定了sheet属性，IE中等价的styleSheet属性
　　function getStyleSheet(element){return element.sheet || element.styleSheet;}
　　var sheet = getStyleSheet(document.getElementsByTagName("link")[0]);
　　1）CSS规则
　　CSSRule是一个供其他类型继承的基类，最常见的就是CSSStyleSheet类型，表示样式信息，包括下列属性
　　cssText：返回整条规则对应的文本，IE不支持，各浏览器支持情况不同
　　parentRule：如果当前规则是导入的规则，此属性引用导入规则，否则这个值为null
　　parentStyleSheet：当前规则所属的样式表，IE不支持此属性
　　selectorText：返回当前规则的选择符文本
　　style：一个CSSStyleDeclaration对象，通过它设置和获取特性的样式表
　　type:表示规则类型的常用类型
　　2）创建规则
　　insertRule()，添加新规则，接受两个参数，规则文本和表示插入规则的索引
　　sheet.insertRule("body{}",0);
　　IE中等价的方法addRule()
　　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);
　　　　}
　　}

　　3）删除规则

　　deleteRule()，接收一个参数，要删除的规划的位置
　　IE中等价的方法，removeRule()，使用方法相同
　　function deleteRule(sheet,index){
　　　　if(sheet.deleteRule){
　　　　　　sheet.deleteRule(index);
　　　　}else if(sheet.removeRule){
　　　　　　sheet.removeRule(index);
　　　　}
　　}

3，元素大小
　　1）偏移量
　　offsetHeight:元素在垂直方向上占用的空间大小，包括元素的高度，水平滚动条的高度，上下边框的高度
　　offsetWidth：元素在水平方向上占用的空间大小，包括元素的宽度，垂直滚动条的宽度，左右边框的高度
　　offsetLeft：元素左外边框至包含元素的左内边框之间的像素距离
　　offsetTop:元素上外边框至包含元素的上内边框之间的像素距离
　　offsetParent:包含元素的引用

　　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）客户区大小
　　是指元素内容及其内边距所占据的空间大小
　　clientWidth：元素内容的宽度和左右内边距宽度
　　clientHeight：元素内容的高度和上下内边距宽度
　　确定浏览器视口的大小

function getViewport(){
　　if(document.compatMode == "BackCompat"){
　　　　return {
　　　　　　document.body.clientWidth;
　　　　　　height:document.body.clienHeight;
　　　　};
　　}else{
　　　　return{
　　　　　　document.documentElement.clientWidth;
　　　　　　height:document.documentELement.clientHeight;
　　　　};
　　}
}

　　3）滚动大小
　　包含滚动内容的元素的大小，四个相关的特性
　　scrollHeight：在没有滚动的情况下，元素内容的总高度
　　scrollWidth：在没有滚动的情况下，元素内容的总宽度
　　scrollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
　　scrollTop：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置
　　混杂模式下的IE，要document.body代替document.documentElement
　　将scrollLeft和scrollTop设置为0，可以重置滚动位置

　　function scrollTOTOP(element){
　　　　if(element.scrollTop != 0){
　　　　　　element.scrollTop = 0;
　　　　}
　　}

　　4）确定元素大小
　　每个元素都提供了getBoundingClientRect()方法，返回一个矩形对象有四个属性，left top right bottom，给出了元素在页面中相对于视口的位置

　　function getBoundingClientRect(element){
　　　　var scrollTop = document.documentElement.scrollTop;
　　　　var scrollleft = document.documentElement.scrollLeft;
　　　　if(element.getBoundingClientRect){
　　　　　　if(typeof argument.callee.offset != 'number'){
　　　　　　　　var temp = document.createElement("div");
　　　　　　　　temp.style.cssText = "position:absolute;left:0;top:0";
　　　　　　　　document.body.appendChild(temp);
　　　　　　　　argument.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
　　　　　　　　document.body.removeChild(temp);
　　　　　　　　temp = null;
　　　　　　}
　　　　　　var rect = element.getBoundingClientRect();
　　　　　　var offset = argument.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; 
　　　　　　　　};
　　　　}
　　}

三，遍历
var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == 'function');
var supportsTreeWalker = (typeof document.createTreeWalker == 'function');
1，NodeIterator
　　1）document.createNodeIterator()方法创建它的新实例，接收四个参数
　　root：作为搜索起点的树中的节点
　　whatToShow：表示要访问哪些节点的数字代码
　　filter：是个NodeFilter对象，是否接受某种特定节点的函数
　　entityReferenceExpansion：布尔值，表示是否要扩展实体引用
　　2）whatToShow是一个位掩码，以常量形式在NodeFilter类型中定义
　　　　NodeFilter.SHOW_ALL：显示所有节点
　　　　NodeFilter.SHOW_ELEMENT:显示元素节点
　　　　NodeFilter.SHOW_ATTRIBUTE:显示属性节点
　　　　NodeFilter.SHOW_TEXT:显示文本节点
　　　　NodeFilter.SHOW_CDATA_SECTION：显示CDATA节点
　　　　NodeFilter.SHOW_ENTITY_REFERENCE：显示实体引用节点
　　　　NodeFilter.SHOW_ENTITY：显示实体节点
　　　　NodeFilter.SHOW_PROCESSING_INSTRUCTION:显示处理指令节点
　　　　NodeFilter.SHOW_COMMENT：显示注释节点
　　　　NodeFilter.SHOW_DOCUMENT：显示文档节点
　　　　NodeFilter.SHOW_DOCUMENT_TYPE：显示文档类型节点
　　　　NodeFilter.SHOW_DOCUMENT_FRAMENT:显示文档片段节点
　　　　NodeFilter.SHOW_NOTATION：显示符号节点
　　3）通过createNodeIterator()方法的filter参数来自定义NodeFilter对象，只有一个acceptNode()方法
　　　　应该访问给定的节点，返回NodeFilter_FILTER_ACCEPT，否则返回NodeFilter_FILTER_SKIP
　　　　NodeFilter是一个抽象的类型，不能直接创建它的实例，只要创建一个包含acceptNode()方法的对象，将这个对象传给createNodeIterator()即可

　　var filter = {
　　　　acceptNode:function(node){
　　　　　　return node.tagName.toLowerCase() == "p"？NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIT;
　　　　}
　　};

　　var iterator = document.createNodeiterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
　　第三个参数可以与acceptNode函数相同

　　var filter = function(node){
　　　　return node.tagName.toLowerCase() == "p"？NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIT;
　　};
　　var iterator = document.createNodeiterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
　　var iterator = document.createNodeiterator(root,NodeFilter.SHOW_ELEMENT,null,false);可以访问所有类型节点

　　4）nextNode() 和 previousNode()方法，返回div中所有li元素

　　　　var div = document.getElementById("div");
　　　　var filter = function(node){
　　　　　　return node.tagName.toLowerCase() == "li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
　　　　};
　　　　var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMNT,filter,false);
　　　　var node = iterator.nextNode();
　　　　while(node != null){
　　　　　　alert(node.tagName);
　　　　　　node = iterator.nextNode();
　　　　}

2，TreeWalker
　　1）不同方向上遍历DOM结构的方法
　　parentNode()：遍历当前节点的父节点
　　firstChild():遍历到当前节点的第一个子节点
　　lastChild()：遍历到当前节点的最后一个子节点
　　nextSibiling():遍历到当前节点的下一个节点
　　previousSibiling()：遍历到当前节点的上一个子节点
　　2）创建TreeWalker对象要使用document.createTreeWalker()方法，参数同上
　　fitler对象返回值不同，还有NodeFilter_FILTER_REJECT，会跳过相应节点和该节点的子树
　　3）不定义过滤器

　　var div = document.getElementById("div");
　　var walker = createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);
　　walker.firstChild();
　　walker.newSibiling();
　　var node = walker,firstChild();
　　while(node != null){
　　　　alert(node.tagName);
　　　　node.nextSibiling();
　　}

　　4）currentNode属性，表示任何遍历方法在上一次遍历中返回的节点
四，范围
1，DOM中的范围
　　document类型中定义了createRange()方法
　　var supportsRange = document.implementation.hadFeature("Range","2.0");
　　var alsoSupportsRange = (typeof document.createRange == 'function');
　　var range = document.createRange();创建的实例提供了属性和方法如下
　　startContainer：包含起点的节点（即第一个子节点的父节点）
　　startOffset：范围在startContainer中起点的偏移量,第一个子节点的索引值
　　endContainer：包含终点的节点
　　endOffset：范围在endContainer中终点的偏移量，最后一个子节点的索引值
　　commonAncestorContainer：startContainer和endContainer共同祖先节点在文档树中位置最深的一个
　　1）用DOM范围实现简单的选择
　　selectNode()：接收一个DOM节点参数，选择整个节点包括子节点
　　selectNodeContents()：接收一个DOM节点参数，只选择节点的子节点

　　var range1 = document.createRange();
　　var range2 = document.createRange();
　　var p1 = document.getElementsByTagName("p")[0];
　　range1.selectNode(p1);
　　range2.selectNodeContents(p1);

　　setStartBefore(refNode):将范围的起点设置在refNode之前，refNode是范围选区的第一个子节点，startContainer=refNode.parentNode
　　setStartAfter(refNode)：将范围的起设置在refNode之后，refNode的下一个同辈节点为范围的起点，startContainer=refNode.parentNode;
　　setEndBefore(refNode)：将范围的终点设置在refNode之前，refNode的前一个同辈节点为范围的终点，endContainer=refNode.parentNode
　　setEndAfter(refNode)：将范围的终点设置在热饭Node之后，refNode是范围选区的最后一个子节点，endContainer=refNode.parentNode
　　2）用DOM范围实现复杂的选择
　　使用setStar(参照节点startContainer，偏移量startOffset)
　　使用setEnd(参照节点endContainer，偏移量endOffset)

　　var range1 = document.createRange();
　　var range2 = document.createRange();
　　var p1 = document.getElementById("p1");
　　var p1index = -1;var i;var len;
　　for(i=0,len=p1.parentNode.childNodes.length;i<len;i++){
　　　　if(p1.parentNode.childNode[i] == p1){
　　　　　　p1index = i;
　　　　　　break;
　　　　}
　　}
　　range1.setStart(p1.parentNode,p1index);
　　range1.setEnd(p1.parentNode,p1index+1);
　　range2.setStart(p1,0);
　　range2.seEnd(p1,p1.childNodes.length);

3）操作DOM范围中的内容
　　创建的范围，内部为这个范围创建一个文档片段
　　第一个办法使用deleteContents()方法，从文档中删除选区包含的内容
　　　　hello world
　　　　var p1 = document.getElementById("p1");
　　　　var hello = p1.firstChild.firstChild;
　　　　var world = p1.lastChild;
　　　　var range = document.createRange();
　　　　range.setStart(hello,2);
　　　　range.setEnd(world,3);
　　　　range.deleteContents();
　　　　页面显示代码如下herld!
　　第二个方法extractContents()，会返回范围的文档片段，利用这个值将范围片段插入到文档中
　　　　hello world
　　　　var p1 = document.getElementById("p1");
　　　　var hello = p1.firstChild.firstChild;
　　　　var world = p1.lastChild;
　　　　var range = document.createRange();
　　　　range.setStart(hello,2);
　　　　range.setEnd(world,3);
　　　　var fragment = range.extractContents();
　　　　p1.parentNode.appendChild(fragment);
　　　　页面显示herld!
　　　　　　　　llo wo
　　第三个方法使用cloneContents()创建范围对象的副本，在文档其他地方插入
　　　　hello world
　　　　var p1 = document.getElementById("p1");
　　　　var hello = p1.firstChild.firstChild;
　　　　var world = p1.lastChild;
　　　　var range = document.createRange();
　　　　range.setStart(hello,2);
　　　　range.setEnd(world,3);
　　　　var fragment = range.cloneContents();
　　　　p1.parentNode.appendChild(fragment);
　　　　页面显示helloworld
　　　　　　　　llo wo
　　4）插入DOM范围中的内容
　　　　insertNode(),可以向范围选区的开始插入一个节点
　　　　surroundContents(),环绕范围插入内容，接收一个参数，环绕范围内容的节点
　　5）折叠DOM范围
　　　　使用折叠范围时，位置会落在完档中两个部分之间，可能是选区开始，或结束
　　　　collapse()，接收一个参数，布尔值，表示折叠到那一端，true表示到起点，false表示到终点
　　　　通过检查collapse属性，判断是否完成折叠，通过是否处于折叠状态，判断范围中的两个节点是否紧密相邻
　　6）比较DOM范围
　　　　compareBoundarypoints()方法，确定多个范围时是否有公共的边界，接收两个参数，表示方式的常量值，比较的范围
　　　　常量值如下
　　　　　　Range_START_TO_START(0) :第一个范围和第二个范围的起点
　　　　　　Range_START_TO_END(1):第一个范围的起点和第二个范围的终点
　　　　　　Range_END_TO_END(2):第一个范围和第二个范围的终点
　　　　　　Range_END_TO_START(3)：第一个范围的终点和第二个范围的起点
　　　　返回值为-1（前在后之前，正常顺序）0（前后相等）1（前在后之后，逆序）
　　7）复制DOM范围
　　　　var newRange = range.cloneRange();
　　8）清理DOM范围
　　　　range.detach();
　　　　range = null;
2，IE8及更早版本中的范围
　　IE只支持文本范围，var range = document.body.createTextRange();
　　1）用IE范围实现简单的选择
　　　　findText()，找到第一次出现的给定的文本，并将范围移过来环绕该文本，没有返回false
　　　　var found = range.findText("text");传人第二个参数表示方向，1为向前搜索，-1为向后搜索
　　　　moveToElementText(),接收一个DOM元素，选择该元素的所有文本
　　　　htmlText属性取得范围的全部范围
　　　　parentElement()与DOM中commonAncestorContainer()等价
　　2）使用IE范围实现发杂的选择
　　　　以特定的增量向四周移动范围，move(),moveStart(),moveEnd(),expand(),接收两个参数，移动单位和移动数量
　　　　character:逐个字符，word：逐个单词，sentent：逐个句子，textedit:移动到当前范围选区开始或结束位置
　　　　moveStart是移动范围起点，moveEnd是移动范围终点，expand(),将范围规范化，将选择部分文本的部分全部选中
　　　　move会首先折叠当前范围，调用之后要使用movestar,moveEnd创建新的额选区
　　3）操作IE范围中的内容
　　　　text属性，range.text = ''
　　　　pasteHTML()方法 range.paeteHTML("")
　　4）折叠IE范围
　　　　collapse(),参数true折叠到起点，false折叠到终点
　　　　collapse不能用来判断是否发生折叠
　　　　boundingWidth属性，如果为0证明发生折叠
　　5）比较IE范围
　　　　compareEndPoints()方法，用法同compareBoundaryPoints(),接收两个参数，比较类型和比较范围
　　　　比较类型的取值范围：StartToStart,StartToEnd,EndToEnd,EndToStart
　　　　返回值，第一个范围的边界位于第二个范围的边前面返回-1，相等返回0，否则返回1
　　　　isEqual(),用于确定两个范围是否相等
　　　　isRange(),用于判断一个范围是否包含另一个范围，调用者包含参数返回true
　　6）复制IE范围
　　　　var newRange = range.duplicate();