JavaScript高級編程筆記(3)

BOM(瀏覽器對象模型)

由于window對象同時扮演ECMAScript中的global對象的角色，因此所有在全局作用域中聲明的變量、函數(shù)都會變成window對象的屬性和方法。

窗口大小:

  • outerWidth、outerHeight 返回瀏覽器窗口本身的尺寸
  • innerWidth、innerHeight 返回該容器中頁面視圖區(qū)的大小
  • document.documentElement.clientWidth、document.documentElement.clientHeight 保存頁面視口的信息。(標準模式)
  • document.body.clientWidth、document.body.clientHeight 保存頁面視口的信息。(混雜模式)
  • document.compatMode 判斷頁面當前模式(CSS1Compat為普通模式)
  • window.resizeTo()和window.resizeBy()方法可以調(diào)整瀏覽器窗口的大小.其中resizeTo()接受瀏覽器窗口新寬度和新高度,而resizeBy()接受新窗口與原窗口的寬度和高度之差.
  • window.open() 打開窗口,第一個參數(shù)為url,第二個參數(shù)為窗口名稱.在不打開新窗口的情況下會忽略第三個參數(shù).該方法會返回一個指向新窗口的引用.

間歇調(diào)用和超時調(diào)用:

  • 超時調(diào)用： setTimeout(fun,time) 和 clearTimeout(object) .
  • 間歇調(diào)用：setInterval(func,time) 和 clearInterval(object) .

location 對象

屬性 描述
hash 設(shè)置或返回從井號 (#) 開始的 URL（錨）。如果地址里沒有“#”，則返回空字符串。
host 設(shè)置或返回主機名和當前 URL 的端口號。
hostname 設(shè)置或返回當前 URL 的主機名。
href 設(shè)置或返回完整的 URL。在瀏覽器的地址欄上怎么顯示它就怎么返回。
pathname 設(shè)置或返回當前 URL 的路徑部分。
port 設(shè)置或返回當前 URL 的端口號，設(shè)置或返回當前 URL 的端口號。
protocol 設(shè)置或返回當前 URL 的協(xié)議，取值為 ‘http:’,’https:’,’file:’ 等等。
search 設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。

navigator 對象

屬性 描述
appCodeName 返回瀏覽器的代碼名。
appMinorVersion 返回瀏覽器的次級版本。
appName 返回瀏覽器的名稱。
appVersion 返回瀏覽器的平臺和版本信息。
browserLanguage 返回當前瀏覽器的語言。
cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值。
cpuClass 返回瀏覽器系統(tǒng)的 CPU 等級。
onLine 返回指明系統(tǒng)是否處于脫機模式的布爾值。
platform 返回運行瀏覽器的操作系統(tǒng)平臺。
systemLanguage 返回 OS 使用的默認語言。
userAgent 返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值。
userLanguage 返回 OS 的自然語言設(shè)置。
  • window.navigator.plugins[]可以遍歷檢測瀏覽器的插件.
注冊處理程序:
  • registerContentHandler()和registerProtocolHandler()方法可以讓一個站點指明它可以處理特定類型的信息.他們接受三個協(xié)議:要處理的協(xié)議、處理該協(xié)議頁面的URL和應(yīng)用程序的名稱。

Screen 對象

在編程中作用不大，基本上只用來表明客戶端的能力。

History 對象

history對象保存著用戶上網(wǎng)的內(nèi)容.
history.go()方法可以在用戶歷史記錄中任意跳轉(zhuǎn)，接受一個參數(shù)表示向后或向前跳轉(zhuǎn)的一個整數(shù)值。
負數(shù)向后，正數(shù)向前，傳遞字符串直接跳轉(zhuǎn).

客戶端檢測

能力檢測

能力檢測目標不是識別特定瀏覽器，而是識別瀏覽器的能力。

能力檢測的基本模式是:

if (object.propertyInQuestion){
  // 使用 object.propertyInQuestion
}

重要概念：一個特性存在，不一定意味著另一個特性也存在。
可靠的檢測：

  • 不要用!object.sort來檢測一個對象是否支持排序,而是用 typeof object.sort == "function"; 來進行檢測.
  • 不要用特性來檢測確定瀏覽器.
  • 部分瀏覽器有bug 可以使用怪癖檢測.

用戶代理檢測

關(guān)于瀏覽器的檢測可以在搜索引擎中獲取相關(guān)信息。

DOM

Dom（文檔對象模型）是針對HTML和XML文檔的一個API（應(yīng)用程序編程接口）.DOM描繪了一個層次化的節(jié)點數(shù)，允許開發(fā)人員添加、移除和修改頁面的某一部分。DOM脫胎于Netscape以及微軟公司創(chuàng)始的DHTML（動態(tài)HTML）。

節(jié)點關(guān)系圖.jpg

Document類型

referrer - 來源頁面URL
domain - 域:
  • 可以將網(wǎng)頁中的內(nèi)嵌框架頁面domain的值設(shè)置為和主頁相同的域來進行互相訪問對方的JvaScript對象。
  • 如果域名一開始是松散的那么就不能將它再設(shè)置為緊繃的.(設(shè)置為"wrox.com"之后再也不能將它設(shè)置回"p2p.wrox.com")
getElementByTagName(elementname)、getElementByName(name)、getElementById(id) 獲取元素操作
  • getElementById(id) 只返回文檔中第一次出現(xiàn)的元素ID。而getElementByTagName接受元素參數(shù)返回包含多個參數(shù)的NodeList(HTMLCollection)。
  • HTMLCollection.namedItem() 方法從集合(HTMLCollection)中取回帶有指定名稱的節(jié)點或元素。
DOM一致性檢測

document.implementation屬性為瀏覽器對DOM的實現(xiàn)提供響應(yīng)信息和功能的對象。

  • DOM1級只為該屬性規(guī)定了一個方法:hasFeature().這個方法接受兩個參數(shù)：要檢測的DOM功能和版本號，瀏覽器支持則返回true。
DOM節(jié)點：
節(jié)點類型.png
節(jié)點類型 - 所返回的值.png
DOM擴展
1、選擇符API

"querySelector 屬于 W3C 中的 Selectors API 規(guī)范 。而 getElementsBy 系列則屬于 W3C 的 DOM 規(guī)范"

  • getXXXByXXX獲取的是動態(tài)集合,querySelector獲取的是靜態(tài)集合.
  • querySelector(CSS選擇符)返回與模式匹配的第一個元素，沒找到返回null.
  • querySelectorAll(CSS選擇符) 返回NodeList對象.
  • matchesSelector(CSS選擇符)，如果調(diào)用元素與該選擇符匹配，返回true，否則返回false。(即判斷CSS選擇符匹配的是調(diào)用元素).
    如果使用的話最好使用包裝函數(shù).
瀏覽器版本 函數(shù)
原生 matchesSelector()
IE9+ msMatchesSelector()
FireFox 3.6+ mozMatchesSelector()
Chrome、Safari 5+ webkitMatchesSelector()
2、元素遍歷(支持規(guī)范：IE 9+ 、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+)
  • childElementCount ：返回子元素（不包括文本節(jié)點和注釋）的個數(shù)。
  • firstElementChild：指向第一個子元素；firstChild的元素版。
  • lastElementChild：指向最后一個子元素；lastChild的元素版。
  • previousElementSibling：指向前一個同輩元素；previousSibling的元素版。
  • nextElementSibling：指向后一個同輩元素；nextSibling的元素版。
var i,
     len,
     child = element.firstElementChild;
while(child != element.lastElementChild){
     processChild(child); 
     child = child.nextElementSibling;
}

HTML5

  • getElementsByClassName() 方法
    接受一個或者多個類名字符串(空格分隔)，返回帶有指定類的所有元素的NodeList.
  • classList 屬性
    元素classList屬性是新集合類型DOMTokenList實例。定義以下方法
方法名 解釋
add(value) 將給定的字符串值添加到列表中，如果值已經(jīng)存在，就不添加了。
contains(value) 表示列表中是否存在給定的值，如果存在則返回true,否則返回false。
remove(value) 從列表中刪除給定的字符串。
toggle(value) 如果列表中已經(jīng)存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
1、焦點管理
  • focus()
  • hasFocus()
2、 HTMLDocument的變化
  • readyState 屬性
    • loading, 正在加載文檔.
    • complete, 已經(jīng)加載完文檔.
  • compatMode 兼容模式
    • CSS1Compat,標準模式.
    • BackCompat,混雜模式.
  • head 屬性
    要引用文檔<head>元素，可以解和使用這個屬性和另一個后被方法
  var head = document.head || document.getElementsByTagName("head")[0];
  • charset 字符集屬性
    • document.charset 表示文檔實際使用的字符集
    • document.defaultCharset 表示根據(jù)默認瀏覽器以及操作系統(tǒng)的設(shè)置，當前文檔默認的字符集應(yīng)該是什么。
3、 自定義數(shù)據(jù)屬性

HTML5規(guī)定可以為元素添加非標準的屬性，但要添加前綴data-，目的是為元素提供與渲染無關(guān)的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名。只要以data-開頭即可。

添加了自定義屬性之后，可以通過元素dataset屬性來訪問自定義屬性的值。

4、 插入標記 （未掌握）
  • innerHTML 屬性

    在讀模式下,innerHTML屬性返回與調(diào)用元素的所有子節(jié)點（元素、注釋和文本節(jié)點）對應(yīng)的HTML標記。
    在寫模式下,innerHTML會根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個DOM樹完全替換調(diào)用元素原先的所有子節(jié)點。

在寫模式下,innerHTML的值會被解析為DOM子樹，替換調(diào)用元素原來的所有子節(jié)點。
如果設(shè)置的值僅僅是文本而沒有HTML標簽，那么結(jié)果就是設(shè)置純文本。
注意:大多數(shù)瀏覽器不會執(zhí)行插入在innerHTML的<script>元素

  • outerHTML 屬性

    在讀模式下,outerHTML屬性返回調(diào)用它的元素以及所有子節(jié)點的HTML標簽。
    在寫模式下,outerHTML會根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹，然后用這個DOM子樹完全替換調(diào)用元素。

  • insertAdjacentHTML() 方法

    它接收兩個參數(shù):插入位置和要插入的HTML文本。

  1. 第一個參數(shù)必須是下列值之一：
    • beforebegin() 在當前元素之前插入一個緊鄰的同輩元素；
    • afterbegin() 在當前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素；
    • beforeend() 在當前元素之下插入一個新的子元素或在最后一個子元素之后再插入新的子元素；
    • afterend() 在當前元素之后插入一個緊鄰的同輩元素；
  2. 第二個參數(shù)是一個HTML字符串。

使用上面方法的時候需要注意 先將字符串單獨構(gòu)造，避免頻繁操作，否則會影響性能。

5、滾動頁面規(guī)范

scrollIntoView()為HTML5最終選擇的滾動頁面標準方法。如果不傳參數(shù)或者傳true作為參數(shù)，窗口滾動之后會讓調(diào)用元素的頂部與視口頂部盡可能平齊。

document.element.scrollIntoView()

專有擴展

1、children屬性
2、contains()方法

祖先節(jié)點調(diào)用contains(childNode)方法判斷某個節(jié)點是否為另一個節(jié)點的后代.
調(diào)用 compareDocumentPosition(Node)方法確定節(jié)點之間的關(guān)系,返回該關(guān)系的掩碼值

掩碼 節(jié)點關(guān)系
1 無關(guān)（給定的節(jié)點不在當前文檔中）
2 居前（給定的節(jié)點在DOM樹中位于參考節(jié)點之前）
4 居后（給定的節(jié)點在DOM樹中位于參考節(jié)點之前）
8 包含（給定的節(jié)點是參考節(jié)點的祖先）
16 被包含（給定的節(jié)點是參考節(jié)點的后代）

DOM2、DOM3

DOM1級主要定義的是HTML和XML文檔的底層結(jié)構(gòu)。DOM2和DOM3則在這個結(jié)構(gòu)的基礎(chǔ)上引入了更多的交互能力，也支持了更高級的XML特性。DOM2、DOM3分為許多模塊：

  • DOM2級核心
  • DOM2級視圖
  • DOM2級事件
  • DOM2級樣式
  • DOM2級遍歷和范圍
  • DOM2級HTML

DOM變化

1、xml命名空間:xmlns
<html xmlns="http://www.w3.org/1999/xhtml">

  • DOM Level 2:
    Node類型包含以下特性:

    • localName: 不帶命名空間前綴的節(jié)點名稱.
    • namespaceURI: 命名空間URI或者（未指定時）null.
    • prefix: 命名空間前綴或者（未指定時）null.

  • DOM Level 3:
    Node類型包含以下特性:

    • isDefaultNamespace(namespaceURI): 在指定的namespaceURI是當前節(jié)點的默認命名空間的情況下返回true.
    • lookupNamespaceURI(prefix): 返回給定prefix的命名空間.
    • lookupPrefix(namespaceURI): 返回給定namespaceURI前綴..

  • Document 類型的變化
    后綴NS ,第一個參數(shù)為命名空間.

    • createElementNS(namespaceURI, tagName) 使用給定的tagName創(chuàng)建一個屬于命名空間namespaceURI的新元素.
    • createAttributeNS(namespaceURI, attributeName) 使用給定的attributeName創(chuàng)建一個屬于命名空間namespaceURI的新特性.
    • getElementsByTagNameNS(namespaceURI, tagName) 返回屬于命名空間的namespaceURI的tagName元素的NodeList.

  • Element 類型的變化
    后綴NS ,第一個參數(shù)為命名空間.

    • getAttributeNS(namespaceURI, localName)
    • getAttributeNodeNS(namespaceURI, localName)
    • getElementsByTagNameNS(namespaceURI, tagName)
    • hasAttributeNS(namespaceURI, localName)
    • removeAttriubteNS(namespaceURI, localName)
    • setAttributeNS(namespaceURI, qualifiedName, value)
    • setAttributeNodeNS(attNode)

  • NamedNodeMap 類型的變化

函數(shù) 作用
getNamedItemNS(namespaceURI, localName) 取得屬于命名空間namespaceURI且名為localName的項
removeNamedItemNS(namespaceURI, localName) 移除屬于命名空間namespaceURI且名為localName的項
settNamedItemNS(node) 添加node

（很少使用）

2、DocumentType類型（DOM Level 2）

DocumentType類型新增三個屬性publicId、systemId、internalSubset，前兩個屬性表示文檔類型聲明的兩個信息段，最后一個屬性用于訪問包含在文檔類型聲明的額外定義。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd"
        [<!ELEMENT name (#PCDATA)>] >

在這個文檔類型聲明而言，publicId是"-//W3C//DTD HTML 4.01//EN" ,systemID是"http://www.w3.org/TR/html4/strict.dtd",internalSubset是 [<!ELEMENT name (#PCDATA)>] (很少用到)

alert(document.doctype.publicId)
3、
3) 滾動大?。╯croll dimennsion)

滾動大小指的是包含滾動內(nèi)容的元素的大小.下面是4個與滾動大小相關(guān)的屬性

  • scrollHeight: 在沒有滾動條的情況下，元素內(nèi)容的總高度。
  • scrollWidth: 在沒有滾動條的情況下，元素內(nèi)容的總寬度。
  • scrollLeft:被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù).通過設(shè)置這個屬性可以改變元素的滾動位置。
  • scrollTop:被隱藏在內(nèi)容區(qū)域上方的像素數(shù).通過設(shè)置這個屬性可以改變元素的滾動位置。

對于不包含滾動條的頁面而言，scrollWidth 和 scrollHeight 與 clientWidth 和 clientHeight 之間的關(guān)系并不十分清晰。在這情況下不同瀏覽器之間發(fā)現(xiàn)不一致性問題

  • Firefox 中這兩組屬性始終都是相等的，但大小代表的是文檔內(nèi)容區(qū)域的實際尺寸，而非視口尺寸。
  • Opera、Safari、Chrome 中的這兩組屬性是又差別的。其中 scrollWidth 和 scrollHeight 等于視口大小 ，而 clientWidth 和 clientHeight 等于文檔內(nèi)容區(qū)域的大小。
  • IE （在標準模式）中的這兩組屬性不相等。其中scrollWidth 和 scrollHeight 等于文檔內(nèi)容區(qū)域的大小，而 clientWidth 和 clientHeight等于視口大小.

確定文檔的總高度是（包括基于視口的最小高度時），必須取得scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保證在跨瀏覽器的環(huán)境下得到精確的結(jié)果。

var docHeight = Math.max(document.documentElement.scrollHeight,
                                            document.documentElemennt.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
                                          document.documentElement.clientWidth);

注意：對于運行在混雜模式下的IE，則需要用document.body代替document.documentElement

4) 確定元素大小

瀏覽器給每個元素提供了getBoundingClientRect()方法。這個方法返回一個矩形對象，包括4個屬性:left、top、right和bottom。
IE8 更早版本認為文檔的左上角坐標是(2,2)，而其他瀏覽器包括IE9則將傳統(tǒng)的(0,0)作為起點坐標.
跨瀏覽器函數(shù):
5) 遍歷

“DOM2級遍歷和范圍” 模塊 定義了兩個用于輔助完成順序遍歷DOM結(jié)構(gòu)的類型：NodeIterator和TreeWalker.這兩個類型能夠基于給定的起點對DOM結(jié)構(gòu)執(zhí)行深度優(yōu)先（depth-first）的遍歷操作。
IE不支持DOM遍歷

使用下列代碼可以檢測瀏覽器對DOM2級遍歷能力的支持情況

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
  • NodeIterator 類型

使用document.createNodeIterator()方法 創(chuàng)建它的新實例。它接受下列四個參數(shù)：

  • root:想要作為搜索起點的樹中的節(jié)點。
  • whatToShow: 表示要訪問哪些節(jié)點的數(shù)字代碼。
  • filter:是一個NodeFilter對象，或者一個表示應(yīng)該接受還是拒絕某種特定節(jié)點的函數(shù)。
  • entityReferenceExpansion: 布爾值，表示是否要擴展實體引用。

whatToShow參數(shù)是一個位掩碼，通過一或多個過濾器來確定要訪問哪些節(jié)點。這個參數(shù)的值以常量形式在NodeFilter類型中定義，如下所示。
https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator/whatToShow

filter參數(shù)指定自定義NodeFilter對象或者指定一個功能類似節(jié)點過濾器的函數(shù)。每個NodeFilter對象只有一個方法。即accept-Node();如果應(yīng)該訪問給定的節(jié)點，該方法返回NodeFilter.FILTER_ACCEPT,如果不應(yīng)該訪問給定的節(jié)點，該方法返回NodeFilter.FILTER_SKIP。
下列代碼展示了如何創(chuàng)建一個只顯示<p>元素的節(jié)點迭代器.

var filter = {
      acceptNode: function(node){
            return node.tagName.toLowCase() == "p" ?
                      NodeFilter.FILTER_ACCEPT :
                      NodeFilter.FILTER_SKIP;
      }
};

var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);

下列代碼創(chuàng)建一個能夠范文所有類型節(jié)點的簡單NodeIterator.(不指定過濾器，第三個參數(shù)傳入null)

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);

NodeIterator類型的兩個主要方法是nextNode()和previousNode().這兩個方法根據(jù)情況遍歷到了最后一個節(jié)點或者根節(jié)點的時候調(diào)用會返回null.

  • TreeWalker 類型
    TreeWalker是一個更能高級的版本。除了包括nextNode()和previousNode()在內(nèi)的相同的功能之外，這個類型還提供了下列用于在不同方向上遍歷DOM結(jié)構(gòu)的方法。
    • parentNode(): 遍歷到當前節(jié)點的父節(jié)點
    • firstChild(): 遍歷到當前節(jié)點的第一個子節(jié)點
    • lastChild(): 遍歷到當前節(jié)點的最后一個子節(jié)點
    • nextSibling(): 遍歷到當前節(jié)點的下一個同輩節(jié)點
    • previousSibling(): 遍歷到當前節(jié)點的上一個同輩節(jié)點

創(chuàng)建TreeWalker對象要使用document.createTreeWalker()方法。接受的四個參數(shù)和document.createNodeIterator()方法相同：作為遍歷起點的根節(jié)點、要顯示的節(jié)點類型、過濾器和一個表示是否擴展實體引用的布爾值。
在這里，filter可以返回的值有所不同。除了NodeIterator那兩個返回值以外，還可以使用NodeFilter.FILTER_REJECT

屬性：

  • currentNode(): 表示任何遍歷方法在上一次遍歷中返回的節(jié)點。通過設(shè)置這個屬性也可以修改遍歷繼續(xù)進行的起點。
var node = walker.nextNode();
alert(node === walker.currentNode); //true
walker.currentNode = document.body;    //修改起點
6) 范圍

通過范圍可以選擇文檔中的一個區(qū)域，而不必考慮節(jié)點的界限。IE以專有的方式實現(xiàn)了自己的范圍特性。

DOM2級在Document類型中定義了createRange()方法?？梢允褂?code>hasFeature()或者直接檢測該方法來判斷瀏覽器是否支持范圍。
每個范圍由一個range類型的實例表示。下列屬性提供了當前范圍在文檔的位置信息

  • startContainer: 包含范圍起點的節(jié)點（即選區(qū)中第一個節(jié)點的父節(jié)點）
  • startOffset: 范圍在 startContainer 中起點的偏移量。如果startContainer是文本節(jié)點、注釋節(jié)點或者CDATA節(jié)點，那么startOffset就是范圍起點之前跳過的字符數(shù)量。否則，startOffset就是范圍中第一個子節(jié)點的索引。
  • endContainer:包含范圍終點的節(jié)點（即選區(qū)中最后一個節(jié)點的父節(jié)點）
  • endOffset:范圍在 endConainer 中終點的偏移量（與startOffset遵循相同的取值規(guī)則）
  • commonAncestorContainer:startContainer 和 endContainer 共同的祖先節(jié)點在文檔樹中位置最深的那個.

要使用范圍來選擇文檔中的一部分，最簡的方式就是使用selectNode()和selectNodeContents().這兩個方法都接受一個參數(shù)，即一個DOM節(jié)點，然后使用該節(jié)點中的信息來填充范圍。
selectNode()方法選擇整個節(jié)點，包括其子節(jié)點。
而selectNodeContents()方法則只選擇節(jié)點的子節(jié)點。
以下面html代碼為例

<p id="p1"><b>hello</b>world</p>

var range1 = document.createRange();
var range2 = document.createRange();
var p1  =  document.getElementById("p1");
range1.selectNode(p1);  //<p id="p1"><b>hello</b>world</p>
range2.selectNodeContents(p1);  //<b>hello</b>world

為了更精細控制將哪些節(jié)點包含在范圍中，還可以使用下面方法.

函數(shù) 功能
setStartBefore(refNode) 將范圍的起點設(shè)置在refNode之前,因此refNode也就是范圍選取中的第一個子節(jié)點。同時將startContainer屬性設(shè)置為refNode.parentNode,將startOffset屬性設(shè)置為refNode在其父節(jié)點的childNodes集合中的索引.
setStartAfter(refNode) 將范圍的起點設(shè)置在refNode之后,因此refNode也就是不在范圍之內(nèi)了。其下一個同輩節(jié)點才是范圍選區(qū)中的第一個子節(jié)點.
setEndBefore(refNode) 將范圍的終點設(shè)置在refNode之前，因此refNode也就不在范圍之內(nèi)了，其上一個同輩節(jié)點才是范圍選取中的最后一個子節(jié)點。同時會將endContainer屬性設(shè)置為refNode.parentNode,將endOffset屬性設(shè)置為refNode在其父節(jié)點的childNodes集合中的索引
setEndAfter(refNode) 將范圍的終點設(shè)置為refNode之后，因此refNode也就是范圍選區(qū)中的最后一個子節(jié)點。同時會將endContainer屬性設(shè)置為refNode.parentNode,將endOffset屬性設(shè)置為refNode在其父節(jié)點的childNodes集合中的索引加1

要創(chuàng)建復(fù)雜的范圍用setStart()和setEnd()方法。這兩個方法都接受兩個參數(shù)：一個參照節(jié)點和一個偏移量值。

  • 對setStart()來說,參照節(jié)點會變成startContainer,而偏移量值會變成startOffset.
  • 對setEnd()來說，參照節(jié)點會變成endContainer,而偏移量值會變成endOffset.

創(chuàng)建范圍后，可以使用各種方法對范圍的內(nèi)容進行操作了。

  • deleteContents() 刪除范圍所包含的內(nèi)容.
  • extractContents() 刪除范圍所包含的內(nèi)容.返回值就是范圍的文檔片段.
  • cloneContents() 創(chuàng)建范圍對象的一個副本，然后在文檔的其他地方插入這個副本.（返回的文檔片段包含范圍中節(jié)點的副本，而不是實際的節(jié)點）
  • insertNode() 在范圍選取的開始處插入一個節(jié)點.
  • surroundContents() 環(huán)繞范圍插入內(nèi)容，接受一個參數(shù)(環(huán)繞范圍內(nèi)容的節(jié)點)
  • collapse() 折疊范圍。接受一個參數(shù)（布爾值），表示要折疊到范圍的哪一端。true表示折疊到范圍的起點，false表示折疊到范圍的終點.確定范圍已經(jīng)折疊完畢，可以檢查collapsed屬性.
    折疊范圍.jpg

有多個范圍的情況下，可以使用compareBoundaryPoints()方法來確定這些范圍是否有公共的邊界（起點或終點）。這些方法接受兩個參數(shù)：表示比較方式的常量值和要比較的范圍。常量值如下：

  • range.START_TO_START(0)：比較第一個范圍和第二個范圍的起點。
  • range.START_TO_END(1)：比較第一個范圍的起點和第二個范圍的終點。
  • range.END_TO_END(2)：比較第一個范圍和第二個范圍的終點。
  • range.END_TO_START(3)：比較的哥范圍的終點和第二個范圍的起點。
    返回值如下：
    第一個范圍的點位于第二個范圍中的點之前，返回-1;如果兩個點相等，返回0；如果第一個范圍中的點位于第二個范圍中的點之后，返回1;
range1.compareBoundaryPoints(Range.START_TO_START, range2));
  • cloneRange() 復(fù)制范圍，創(chuàng)建調(diào)用它的范圍的一個副本.
  • 使用完范圍，最好調(diào)用detach()方法，以便從創(chuàng)建范圍的文檔中分離出該范圍。調(diào)用detach()之后，就可以放心解除對范圍的引用。(range = null)

IE8及早期版本不支持DOM范圍，但支持一種類型的概念。即文本范圍（text range）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容