javascript高级开发学习笔记八

一、DOM：针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

        1.1 Node类型：每一段标记可以通过树中的一个结点来表示：HTML元素通过元素节点来表示、特性结点通过特性结点表示、文档类型通过文档类型结点表示、而注释则通过注释结点表示。共有12种节点类型。

               javascript中的所有节点类型都继承自node类型，因此所有的节点类型都共享着相同的基本属性和方法。

               每个节点都有一个nodeType属性，用于表明节点的类型。Node类型定义了12个数值常量：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)。

               （1）（nodeName、nodeValue）属性

               （2）节点关系：每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。Nodelist是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点（有length属性）。Nodelist对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在Nodelist对象中。Nodelist是有生命、有呼吸的对象。访问保存到Nodelist中的节点，可以通过方括号，也可以使用item()方法。

                         每个节点都有一个parentNode属性，该属性指向文档树中的父节点。childNodes属性，子节点。previousSibling和nextSibling属性，指向上一个节点或下一个节点。 父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。

                         hasChildNodes（）这个方法在节点包含一个或多个子节点时返回true。所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

                 （3）操作节点：appendChild()用于向childNodes列表末尾添加一个节点，添加完成后返回新增的节点。如果传入的节点已经文档的一部分，那结果就是将该节点从原来的位置转移到新位置。insertBefore()该方法有两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点前的一个同胞节点，同时被返回。replaceChild()方法接受两个参数：要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置。removeChild()这个方法接受一个参数，即要移除的节点。 replaceChild和removeChild方法移除的节点仍然为文档所有，只不过在文档已经没有自己的位置。

                 （4）其它方法：有两个方法所有类型都有：cloneNode()用于创建节点的一个完全相同的副本，该方法接受一个参数（boolean）,表示是否执行深复制。参数为true表示深复制，复制节点及其整个子节点树。参数为false表示浅复制，只复制节点本身。复制后的节点属于文档所有，但没有为它指定父节点。normalize()处理文档树中的文本节点。由于 解析器的实现或DOM操作等原因，可能出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，就删除它。如果找到相邻的文本节点，则将它们合并为一个文本节点。

       1.2 Document类型：javascript通过Document类型 表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document是window对象的一个属性，因此可作为全局对象来访问。Document具有下列特性：（1）nodeType的值为9；（2）nodeName的值为“#document"；（3）nodeValue的值为null；（4）parentNode的值为null；（5）ownerDocumnet的值为null；（6）其节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。

                   文档的子节点：两个内置访问子节点的快捷方式：documentElement（始终指向HTML页面中的html元素）和childNodes。document.body可直接获取body元素。

                                              Document另一个可能的节点是DocumentType。document.doctype来访问它的信息。

                   文档信息：document.title、document.URL、document.domain(可设置)、document.referrer。通过将两个页面中的document.domain设置为相同的值，这些页面可以互相访问对方包含的javascript对象了。

                   查找元素：getElementById()和getElementByTagName()、document.getElementsByName()。

                   特殊集合：document.anchors(所有带name特性的a元素)、document.applets(所有applet元素)、document.forms(文档中所有form元素)、document.images(文档中所有img元素)、document.links(文档中所有带href的a元素)

                   DOM一致性检测：document.implementation.hasFeature('xml','1.0')两个参数：DOM功能名称、版本号。

                   文档写入：write()、writeln()、open()、close()

        1.3 Element类型：NodeType(1)、nodeName(元素的标签名)、nodeValue(null)、parentNode(Document或Element)、子节点Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReferece

               （1）HTML元素：id、title、lang、dir（语言方向）、className

               （2）取得特性：操作特性的三个方法getAttribute()、setAttribute()、removeAttribute()

               （3）attributes属性：Element是使用attributes属性的唯一一个DOM节点类型。这个属性中包含一个NamedNodeMap集合，元素的每一个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap中。NameNodeMap对象有下列方法：getNamedItem(name)、removeNamedItem(name)、setNamedItem(node)、item(pos)

               （4）创建元素：document.createElement()方法可以创建新元素。该方法接受一个参数，要创建元素的标签名。

         1.4 Text类型：Text节点特性：nodeType(3)、nodeName(#Text)、nodeValue(所包含文本)、parentNode(Element)、没有子节点。data与nodeValue功能相同。

                 appendData(text)：将text添加到节点的末尾；

                 deleteData(offset,text)：从offset指定位置开始删除text；

                 insertData(offset,text)：在offset指定位置插入text；

                 replaceData(offset,count,text)：用text替换从offset指定位置开始到offset+count为止的文本；

                 splitText(offset)：从offset指定的位置将当前文本节点分成两个文本节点；

                 substringData(offset,count)：提取从offset指定位置开始到offset+count为止的字符串；

                 length属性

                （1）创建文本节点：document.createTextNode()创建新文本节点。该方法一个参数：要插入节点中的文本。

                （2）规范化文本节点：如果两个节点包含两个或多个节点，则在父元素上调用normalize()方法，将所有文本节点合并成一个节点。

                （3）分割文本节点：splitText()这个方法将一个文本节点分成两个文本节点。

         1.5 Comment类型：特性 nodeType(8)、nodeName(#comment)、nodeValue(注释的内容)、parentNode(Document或Element)、没有子节点。

                Comment类型与Text类型继承自相同的基类。所有拥有除了splitText()方法之外的所有方法。也可以使用nodeValue和Data属性来取得注释的内容。

         1.6 CDATASection类型：nodeType(4)、nodeName(#cdata-section)、nodeValue(CDATA区域中的内容)、parentNode(Document/Element)、无子节点

                该类型只针对于XML的文档，表示的是CDATA区域。与Comment类似，继承自Text类型，拥有除了splitText()之外的所有字符串操作方法。

         1.7 DocumentType类型：nodeType(10)、nodeName(doctype的名称)、nodeValue(null)、parentNode(Document)、没有子节点。包含着与文档相关的doctype信息。

                支持它的浏览器会把DocumentType对象保存在document.doctype中。DOM1级描述了DocumentType对象的三个属性：name、entites、notations。name表示文档类型的名称；entities是由文档类型描述的实体的NamedNodeMap对象；notations是由文档类型描述的符号的NamedNodeMap对象。通常，浏览器中使用的对象都是HTML或XHTML，所以entities、notations都是空列表。

         1.8 DocumentFragment类型：nodeType(11)、nodeName(#document-fragment)、nodeValue(Null)、parentNode(null)、子节点Element、ProcessingInstruction、Comment、Text、CDATASection、EntityReference。

                DOM规定文档片段是一种“轻量级”文档，可以包含和控制节点，但不会像完整的文档一样，暂用资源。虽然不能把文档直接添加到文档中，但可以将它作为一个“仓库”来使用，即在里面保存将来可能会添加到文档中的节点。要创建文档片段，可以使用document.createDocumentFragment()方法。

                文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档中，就会从文档树中移除该节点也不会在浏览器中看到该节点。

         1.9 Attr类型：nodeType(11)、nodeName(特性的名称)、nodeValue(特性的值)、parentNode（null）、HTML中没有子节点、XML中子节点是Text或EntityReference。

               元素的特性在DOM中以Attr类型来表示。尽管它们是节点，但特性确不被认为是DOM文档树中的一部分。

               Attr对象有三个属性：name、value、specified。name是特性名称，value是特性的值，specified是一个布尔值，用以区别特性是在代码中指定的，还是默认的。

二、DOM操作技术

        2.1 动态脚本：使用<script>元素可以向页面中插入Javascript脚本，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码。动态脚本指的是在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本（插入外部文件、直接插入Javascript代码）。

               document.createElement('scriipt')；

        2.2 动态样式：能够把css样式包含到HTML页面中的元素有两个。其中，<link>元素用来包含外部文件，<style>元素用于指定嵌入的样式。动态样式指的是，页面刚加载时不存在的样式；动态样式是在页面加载完成后，动态添加到页面中的。

              document.createElement('link');创建完成后，添加到文档对象时，必须将<link>添加到<head>而不是<body>中。

       2.3 操作表格

       2.4 使用NodeList：理解NodeList及其NamedNodeMap和HtmlCollection，这三个集合是动态的。每当文档发生变化时，它们都会得到更新。

三、DOM扩展

      3.1 选择符API

             querySelector()方法：接受一个css选择符，返回与该模式匹配的第一个元素。通过Document类型调用时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用时，只会在该元素后代元素的范围内查找匹配的元素。

             querySelectorAll()方法：接受一个css选择符，返回所有匹配的元素，NodeList实例。

             matchesSelecor()方法：接受一个css选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

      3.2 元素遍历

            childElementCount：返回子元素的个数（不包含文本节点和注释）

            firstElementChild：指向第一个元素

            lastElementChild：指向最后一个元素

            previousElementSibling：指向前一个同辈元素

            nextElementSibling：指向后一个同辈元素

      3.3 HTML5

            （1）getElementsByClassName（）方法：接受一个参数，一个包含一或多个类名和字符串，返回带有指定的所有元素NodeList。

                      classList属性（支持chrome、Firefox）：在操作类名时，需要通过className属性添加、删除和替换类名。HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。这个新类型定义了如下方法：add(value)、contains(value)、remove(value)、toggle(value)

           （2）焦点管理：document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activement的值为null。document.hasFocus()方法确定文档是否获得了焦点。focus()方法获得元素焦点。

           （3）HTMLDocument的变化

                     readyState：该属性有两个可能的值loading(正在加载文档)、complete(已经加载完文档)。

                     兼容模式（compatMode）：在标准模式下document.compatMode的值等于“CSS1Compat”，而在混杂模式下，而在混杂模式下document.compatMode的值等于“BackCompat”。

                     head属性：document.head

           （4）字符集属性：charset属性表示文档中实际使用的字符集document.charset。defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集是什么。如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能会不一样。

           （5）自定义数据属性：HTML5规定可以为元素添加非标准属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义的信息。可以通过元素的dataset属性来访问自定义的属性的值（DOMStringMap的一个实例，名值对映射，名无data-前缀）。

           （6）插入标记

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

                     outerHTML属性：在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

                     insertAdjacentHTML()：插入位置和要插入的HTML文本。第一个参数必须为beforebegin、afterbegin、beforeend、afterend。

           （7）scrollIntoVIew()方法：如果这个方法传入true作为参数，或者不传入任何参数，窗口滚动之后会让调用元素顶部与窗口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能会全部出现在窗口中，不过顶部不一定对齐。

四、DOM2和DOM3

      4.1 DOM变化

            （1）针对XML命名空间的变化

            （2）其他方面的变化

                      DocumentType类型的变化，该类型新增了三个属性：publicId、systemId、internalSubset。其中前两个属性表示的是文档类型声明中的两个信息段，这两个信息段在DOM1级中是没有办法访问到的。通过document.doctype. 属性访问。internalSubset用于访问包含在文档类型声明中的额外的定义。

                      importNode()：1.这个方法的用途是从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为这个文档的一部分。 每个文档都有一个ownerDocument属性，表示所属的文档。如果调用 appendChild()时传入的节点属于不同的文档（ownerDocument值不一样），会报错。但在调用 importNode()时传入不同文档的节点会返回一个新节点，这个新节点归当前文档所有。2.该方法接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。3.defaultView属性（DOM2级视图），保存一个指针，指向拥有给定文档的窗口。4.document.implementation对象规定了两个新方法（DOM2级核心）：createDocumentType()和createDocument()。前者用于创建一个新的DocumentType节点（只能创建新文档），接受三个参数，文档类型名称、publicId、systemId。创建新文档时，需要调用createDocument()方法，接受三个参数，namespaceURI、文档元素的标签名、新文档的文档类型。5.document.implementation新增了一个方法（DOM2级HTML），创建一个完整的html文档，接受一个参数，要创建文档的标题，返回html的新文档。

             （3）Node类型的变化

                       isSupported()方法用于确定当前文档具有什么能力，接受两个参数：特性名和特性版本号。

                       DOM3引入两个辅助比较的方法：isSameNode()和isEqualNode()，这两个方法都接受一个节点参数，并在传入节点与引用节点相同或相等时返回true（相同：两个节点引用同一个对象；相等：相同的类型、相同的属性）。

                       DOM3添加额外数据引入方法setUserData()，接受三个参数，要设置的键、实际数据、处理函数。getUserData()，传入相同的键取值。该方法会在数据的节点复制、删除、重命名、引入一个文档时被调用，处理函数接受5个参数，表示操作类型的数据（1：复制；2：导入；3：删除；4：删除；5：重命名；）、数据键、数据值、源节点和目标节点。t

              （4）框架的变化：框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，DOM2级有一个新属性contentDocument。这个属性包含一个指针，指向表示框架内容的文档对象。

       4.2 样式

              （1）访问样式属性和方法：任何支持style特性的HTML元素在Javascript中都有一个对应的style属性。这个对象是CSSStyleDeclaration实例，在style特性中指定任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式。如果background-image为backgroundImage。float为关键字，访问使用cssFloat或styleFloat。

                         DOM样式属性和方法：cssText（访问style特性中的css代码）、length（css属性的数量）、parentRule（css信息的CSSRule对象）、getPropertyCSSValue(propertyName)（返回包含给定属性的CSSValue对象）、getPropertyPriority(propertyName)（如果给定属性使用了！Important，则返回important，否则返回空字符串）、getPropretyValue(propertyName)（给定属性的字符串值）、item(index)（给定位置的CSS属性名称）、removeProperty(propertyName)（删除给定属性）、setProperty(prpoertyName,value,prpperty)（给定属性设置相应的值，并加上优先权标志）

                        通过cssText属性可以访问style特性中的css代码。在读取模式下，cssText返回浏览器对sylte特性中css代码的内部表示。在写入模式下，赋值cssText的值会重写整个style特性的值。如果通过style特性为元素设置了边框，然后再以不包含边框的规则重写cssText，那么就会抹去元素上的边框。设置length属性是目的，就是将其与item()方法配套使用。设置cssText是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化。

                        DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串。返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

               （2）操作样式表：CSSStyleSheet（更通用一些）类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。CSSStyleSheet对象是一套只读的接口。继承自StyleSheet，后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下：

                          disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，设置为true可以禁用样式表。

                          href：如果样式表是通过<link>包含的，则是样式表的URL；否则，是NULL。

                          media：当前样式表支持的所有媒体类型的集合。有length属性和item()方法。

                          ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML中通过<link>或<style>引入的。如果是通过@import引入的，则这个发展为null。

                          parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。

                          title：ownerNode中title属性的值。

                          type：表示样式表类型的字符串。对css样式表而言，这个值为“style/css”。

                          除了disabled属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet类型还支持下列属性和方法。

                         cssRules：样式表中包含的样式规则的集合。（IE：rules）

                         ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则。否则，值为null。

                         deleteRule(index)：删除cssRules集合中指定位置的规则。（IE：removeRule()）

                         insertRule(rule,index)：向cssRules集合中指定位置插入rule字符串。（IE：addRule()）

                应用于文档的所有样式表是通过document.styleSheets集合来表示的。length属性获取数量，方括号和item()访问每一个样式表。DOM规定了一个包含CSSStyleSheet对象的属性，名叫sheet（IE：styleSheet）。

               CSS规则：CSSRule对象表示样式表中的每一个规则，实际上，CSSRule是一个供其他多种类型继承的基类，其中最常见的就是CSSStyleRule类型，表示样式信息。CSSStyleRule对象包含下列属性。cssText：返回整条规则对应的文本。parentRule：如果当前的规则是导入的规则，这个属性引用的就是导入规则。否则，为null。parentStyleSheet：当前规则所属样式表。style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。type：表示规则类型的常量值。样式规则，这个值为1。大多数情况下，仅使用style属性就可以满足所有操作样式规则的需求了。

               创建规则：insertRule()方法，接受两个参数：规则文本和表示在哪里插入规则的索引。

               删除规则：deleteRule()方法，接受一个参数：要删除规则的位置。

              （3）元素大小 

                        偏移量：offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包含元素的高度、可见水平滚动条高度、上边框高度、下边框高度。

                                        offsetWidth：元素在水平方向上占用空间大小，以像素计。包含元素的宽度、可见垂直滚动条宽度、左边框宽度、右边框宽度。

                                        offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

                                        offsetTop：元素的上外框架至包含元素的上内边框之间的像素距离。

                        客户区大小 ：clientWidth属性是元素内容区宽度加上左右内边距宽度。clientHeight属性是元素内容区高度加上上下内边距高度。

                        滚动大小 ：scrollHeight：在没有滚动条的情况下，元素内容的总高度。

                                             scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

                                             scrollLeft：被隐藏在内容区左侧的像素数。通过设置这个值，可修改滚动条位置。

                                             scrollTop：被隐藏在内容区上方的像素数。通过设置这个值，可修改滚动条位置。

                       确定元素大小：浏览器对每个元素提供了一个getBoundingClientRect()方法。这个方法返回一个矩形对象，包含4个属性：left、top、right、bottom。这些属性表示元素在页面中相对于视口的位置。

       4.3 遍历：DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。

             （1）NodeIterator：document.createNodeIterator()方法创建新实例。接受四个参数：root：搜索要节点。whatToShow：表示要访问哪些节点的数字代码。filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数。entityReferenceExpansion：布尔值，表示是否要扩展实体应用。

                       NodeIterator有两个方法：nextNode()和previousNode()。

             （2）TreeWalker：document.createTreeWalker()方法创建新实例，接受4个参数与createNodeIterator()方法相同。是NodeIterator的一个更高级的版本。除了有nextNode()和previousNode()在内的相同功能之外，这个类型还提供了下列用于在不同方向上遍历DOM结构的方法。parentNode()：遍历到当前节点的父节点；firstChild()：遍历到当前节点的第一个子节点；lastChild()：遍历到当前节点的最后一个子节点；nextSibling()：遍历到当前节点的下一个同辈节点；previousSibling()：遍历到当前节点的上一个同辈节点。

       4.4 范围

            （1）DOM中的范围：DOM2级在Document类型中定义了createRange()方法。每个范围由一个Rang类型的实例表示，这个实例有很多属性和方法。下列属性提供了当前范围在文档中的位置信息。startContainer：包含范围起点的节点（选区中第一个节点的父节点）。startOffet：范围在startContainer中起点的偏移量。如果startContainer是文本节点、注释节点、CDATA节点，那么startOffset就是范围起点之前跳过的字符数量。否则就是范围中第一个节点的索引。endContainer：包含范围终点的节点（选区中最后一个节点的父节点）。endOffset：范围在endContainer中终点的偏移量。commonAncestorContainer：startContainer和endContainer共同的祖先节点在文档树中位置最深的那个。

              用DOM范围实现简单选择：selectNode或selectNodeContents()，这两个方法接受一个参数，一个DOM节点。

              用DOM范围实现复杂选择：setStart()和setEnd()方法，这两个方法接受两个参数：一个参照节点和一个偏移量值。

              操作DOM范围中的内容：deleteContents()从文档中删除范围所包含的内容。extractContents()也会从文档中移除范围选区，但是该方法会返回范围的文档片段，可用于添加到其它地方。

              插入DOM范围中的内容：insertNode()方法可以向范围选区的开始处插入一个节点。surroundContents()方法，该方法接受一个参数，环绕范围内容的节点。在环绕范围插入内容时，会执行下列步骤（1）提取出范围中的内容；（2）将给定节点插入到文档中原来范围所在的位置上；（3）将文档片段的内容添加到给定节点中。

              折叠DOM范围：指范围中未选择文档的任何部分。使用collapse()方法来折叠范围，该方法接受一个布尔值参数，表示表示要折叠到范围的哪一端，true起点；false终点；要确定范围已经折叠完毕，检查collapsed属性。

              比较DOM范围：多个范围情况下，使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界（起点或终点）。这个方法接受两个参数，比较方式的常量值和要比较的范围。如果第一个范围中的点位于第二个范围中的点之前，返回-1；如果两个点相等，返回0；如果第一个范围中的点位于第二个范围中的点之后，返回1。比较方式的常量值如下：Range.START_TO_START(0)：比较第一个范围和第二个范围的起点。RANGE.START_TO_END(1)：比较第一个范围的起点和第二个范围的终点。RANGE.END_TO_END(2)：比较第一个范围和第二个范围的终点。RANGE.END_TO_START(3)：比较第一个范围的终点和第二个范围的起点。

             复制DOM范围：cloneRange()方法复制范围。

             清理DOM范围：在使用完范围之后，使用detach()方法，以便从创建范围的文档中分离出该范围。