JavaScript高級程序設(shè)計(jì) DOM學(xué)習(xí)筆記

更新時間：2011年09月10日 02:36:59 作者：

DOM是針對XML和HTML文檔的一個API：即規(guī)定了實(shí)現(xiàn)文本節(jié)點(diǎn)操控的屬性、方法，具體實(shí)現(xiàn)由各自瀏覽器實(shí)現(xiàn)。

第十章 DOM
DOM是針對XML和HTML文檔的一個API：即規(guī)定了實(shí)現(xiàn)文本節(jié)點(diǎn)操控的屬性、方法，具體實(shí)現(xiàn)由各自瀏覽器實(shí)現(xiàn)。
1. 節(jié)點(diǎn)層次
1) 文檔節(jié)點(diǎn)：document，每個文檔的根節(jié)點(diǎn)。
2) 文檔元素：即<html>元素，文檔最外層元素，文檔節(jié)點(diǎn)第一個子節(jié)點(diǎn)。
3) Node類型：
①Node是DOM中各種節(jié)點(diǎn)類型的基類型，共享相同的基本屬性和方法。
□ 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);
每種節(jié)點(diǎn)的nodeType屬性返回上述類型之一，為一常量。
通過節(jié)點(diǎn)nodeType屬性與數(shù)字值比較，可得節(jié)點(diǎn)類型。
②nodeName和nodeVlue屬性。
③每個節(jié)點(diǎn)的子節(jié)點(diǎn)信息保存在childNodes屬性中，childNodes屬性中保存一個NodeList對象。
□ NodeList對象，類數(shù)組對象，有l(wèi)ength屬性，但非Array的實(shí)例。
□ 訪問NodeList中的節(jié)點(diǎn)，可以通過方括號，也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 將NodeList轉(zhuǎn)為數(shù)組對象。
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屬性：指向文檔樹中父節(jié)點(diǎn)。
⑤previousSibling屬性和nextSibling屬性：前一個/下一個同胞節(jié)點(diǎn)。
⑥firstChild屬性和lastChild屬性：前一個/后一個子節(jié)點(diǎn)。
⑦h(yuǎn)asChildNodes()方法：含子節(jié)點(diǎn)返回true，反之返回false。
⑧appendChild()方法：向childNodes列表末尾添加一個子節(jié)點(diǎn)，返回新增節(jié)點(diǎn)。
⑨insertBefore()方法：兩個參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。返回新增節(jié)點(diǎn)。
⑩replaceChild()方法：兩個參數(shù)：要插入的節(jié)點(diǎn)和要替換節(jié)點(diǎn)。返回新增節(jié)點(diǎn)。
⑾removeChild()方法：移除節(jié)點(diǎn)。
⑿cloneNode()方法：接受一個布爾值。true為深復(fù)制，復(fù)制節(jié)點(diǎn)及子節(jié)點(diǎn)。false為淺復(fù)制，僅復(fù)制本身節(jié)點(diǎn)。
⒀nomalize()方法：處理文檔樹中文本節(jié)點(diǎn)。
4) Document類型（針對document對象）
①Document類型表示文檔，是HTMLDocument類型的一個實(shí)例，表示整個HTML頁面。document對象是window對象的一個屬性，可作全局對象訪問。
②documentElement屬性；該屬性始終指向HTML頁面中的<html>元素。
③body屬性；直接指向<body>元素。
④doctype屬性：訪問<!DOCTYPE>，各瀏覽器支持不一致。用處有限。
⑤title屬性：可獲得和設(shè)置title的文本。
⑥URL屬性：地址欄中的URL。
⑦domain屬性：頁面的域名（可設(shè)置，有限制）
⑧referrer屬性：保存鏈接到當(dāng)前頁面的那個頁面的URL
⑨getElementById()方法：傳入元素的ID，返回元素節(jié)點(diǎn)。
⑩getElementsByTagName()方法：傳入元素名，返回NodeList。
□ 在HTML中返回一個HTMLCollection對象，與NodeList類似。
□ 訪問HTMLCollection對象：方括號語法，item()方法，namedItem()方法，HTMLCollection對象還可通過元素的name特性取得集合中的項(xiàng)。
⑾getElementsByName()方法：返回帶有給定name特性的所有元素。
⑿特殊集合，這些集合都是HTMLCollection對象。
□ document.anchors:包含文檔中所有帶name特性的<a>元素。
□ document.applets:包含文檔中所有的<applet>元素。
□ document.forms:包含文檔中所有的<form>元素。
□ document.images:包含文檔中所有的<img>元素。
□ document.links:包含文檔中所有帶href屬性的<a>元素。
⒀DOM一致性檢測：document.implementation屬性就為此提供相應(yīng)信息和功能的對象。
□ 此對象有一個方法：hasFeature()：兩個參數(shù)：要檢測的DOM功能的名稱及版本號。
□ 功能：Core、XML、HTML、Views、StyleSheets、CSS、CSS2、Events、UIEvents、MouseEvents、MutationEvents、HTMLEvents、Range、Traversal、LS、LS-Async、Validation
⒁將輸出流寫入網(wǎng)頁：write()、writeln()、open()和close()。
5) Element類型
①用于表現(xiàn)XML或HTML元素，提供了對元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問。
②可用nodeName屬性或tagName屬性訪問元素標(biāo)簽名。tagName會在HTML中返回大寫標(biāo)簽名，在XML中會原樣返回。
（1）HTML元素
■所有HTML元素都由Element類型子類HTMLElement類型表示，其屬性如下：
□id：元素在文檔中的唯一標(biāo)識符。
□title：有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來。
□lang：元素內(nèi)容的語言代碼，很少使用。
□dir：語言的方向，值為“l(fā)tr”或“rtl”，很少使用。
□className：與元素的class特性對應(yīng)，即為元素指定的css類。
上述這些屬性都可以用來取得或修改相應(yīng)的特性值。
（2）取得特性
①getAttribute()方法：可以取得公認(rèn)特性和自定義特性的值。
□任何元素的所有特性，也可以通過DOM元素本身的屬性來訪問。alert(div.id);alert(div.align);
□只有公認(rèn)的（非自定義的）特性才會以屬性的形式添加到DOM對象中。
□style特性通過getAttribute()訪問得特性值CSS文本。通過屬性訪問得一個對象。
□onclick特性：getAttribute()，返回JS代碼字符串。通過屬性訪問返回一個函數(shù)。
□一般通過屬性取得特性，只有在取自定義特性值時，才用getAttribute()。
（3）設(shè)置特性
①setAttribute()：兩個參數(shù)，要設(shè)置的特性名和值。如果特性已經(jīng)存在，setAttribute()會以指定的值替換現(xiàn)有的值；如果特性不存在，setAttribute()則創(chuàng)建該屬性并設(shè)置相應(yīng)的值。
□此方法既可以操作HTML特性也可以操作自定義特性。
□所有公認(rèn)特性都是屬性，因此直接給屬性賦值可以設(shè)置特性的值。
□IE6、IE7中，setAttribute()設(shè)置class、style，事件處理程序會每沒有任何效果。但不建議通過屬性設(shè)置特性。
②removeAttribute()：徹底刪除元素的特性（IE6不支持）。
（4）attributes屬性
①此屬性包含一個NameNodeMap對象（類似NodeList的“動態(tài)”集合）。元素的每一個特性有一個Attr節(jié)點(diǎn)表示，每個節(jié)點(diǎn)保存在NameNodeMap對象中。
□getNameItem(name)：返回返回nodeName屬性等于name的節(jié)點(diǎn)
□removeNameItem(name)：從列表中移除nodeName屬性等于name的節(jié)點(diǎn)。
□setNameItem(node)：向列表中添加節(jié)點(diǎn)，以節(jié)點(diǎn)的nodeName屬性為索引。
□item(pos)：返回位于數(shù)字pos位置的節(jié)點(diǎn)。
（5）創(chuàng)建元素
①使用document.createElement()方法可以創(chuàng)建新元素。參數(shù)：標(biāo)簽名。
②IE中createElement()可傳入完整的元素標(biāo)簽，防止IE7以及IE6問題：
□不能設(shè)置動態(tài)創(chuàng)建的<iframe>元素的name特性
□不能通過表單的reset()方法重設(shè)動態(tài)創(chuàng)建的<input>元素。
□動態(tài)創(chuàng)建的type特性值為“reset”的<button>元素重設(shè)不了表單。
□動態(tài)創(chuàng)建的一批name相同的單選按鈕彼此毫無關(guān)系。
if(client.browser.ie&&client.brower.ie<=7){
var iframe = document.createElement("<iframe name = \"myframe\"></iframe>");
}
（6）元素的子節(jié)點(diǎn)
①元素的childNode屬性中包含了它的所有子節(jié)點(diǎn)：元素、文本節(jié)點(diǎn)、注釋或處理指令。
□一般瀏覽器解析childNodes時會把元素節(jié)點(diǎn)空間的空白符解析為文本節(jié)點(diǎn)，而IE不會。因此遍歷執(zhí)行操作需要檢查nodeType屬性。
For(var i= 0, len = element.childNode.length; i> len; i++){
If(element.childNodes[i].nodeType == 1){
//執(zhí)行某些操作
}
}
□元素節(jié)點(diǎn)支持getElementByTagName()方法。
6) Text類型
①文本節(jié)點(diǎn)由Text類型表示，包含純文本內(nèi)容，不含HTML代碼。
□不支持（沒有）子節(jié)點(diǎn)
□nodeValue屬性、data屬性可訪問Text節(jié)點(diǎn)中包含的文本。
②操作文本節(jié)點(diǎn)
□appendData(text)：將text添加到節(jié)點(diǎn)的末尾。
□deleteData(offset,count)：從offset位置開始刪除count個字符。
□insertData(offset,text)：在offset位置插入text；
□replaceData(offset,count,text)：用text替換從offset指定的位置開始到offset+count為止處的字符串。
□splitText(offset)：從offset指定位置將當(dāng)前文本節(jié)點(diǎn)分成兩文本節(jié)點(diǎn)。
□substringData(offset,count)：提取offset指定的位置開始到offset+count為止處的字符串。
□文本節(jié)點(diǎn)有一個length屬性，保存節(jié)點(diǎn)中字符的數(shù)目。而nodeValue.length和data.length中也保存著同樣的值。
○修改文本節(jié)點(diǎn)值時字符串經(jīng)HTML編碼，特殊符號轉(zhuǎn)義：
div.firstChild.nodeValue = "Some<strong>other</strong>"; //輸出Some<Strong>other</strong&gt
③創(chuàng)建文本節(jié)點(diǎn)
□使用document.createTextNode()創(chuàng)建新文本節(jié)點(diǎn)。參數(shù)：要插入的文本（自動按HTML或XML格式編碼）
④規(guī)范化文本節(jié)點(diǎn)
□DOM操作中可向同一父元素插入多個文本節(jié)點(diǎn)，但會造成混亂。
□通過node類型繼承的normalize()方法可合并同一父元素上的所有文本節(jié)點(diǎn)。
⑤分割文本節(jié)點(diǎn)
□Text類型方法splitText()：與node方法normalize()相反傳入一個位置參數(shù)，從該位置拆分成兩個文本節(jié)點(diǎn)，返回后面的文本節(jié)點(diǎn)。
□分割文本節(jié)點(diǎn)是從文本節(jié)點(diǎn)中提取數(shù)據(jù)的一種常用DOM解析技術(shù)。
7) Comment類型
□Comment類型與Text類型繼承自相同的基類，因此它擁有除splitText()之外所有字符串操作方法。
□可使用document.createComment()創(chuàng)建注釋節(jié)點(diǎn)。
8) CDATASection類型
□CDATASection類型只針對基于XML的文檔表示CDATA區(qū)域。
□CDATASection類型繼承自Text類型，擁有除splitText()之外所有方法。
□各大瀏覽器均無法正確解析這種類型。
9) DocumentType類型
□IE不支持
□在DOM1級中DocumentType對象不能動態(tài)創(chuàng)建。
□DocumentType對象保存在document.doctype中。
◇name屬性：文檔類型名稱。
◇entities屬性：文檔類型描述的實(shí)體的NamedNodeMap對象。
◇notation屬性：文檔類型描述的符號的NamedNodeMap對象。
10) DocumentFragment類型
□DOM規(guī)定文檔片段（document fragment）是一種“輕量級”的文檔，可以包含和控制節(jié)點(diǎn)，但不會像完整的文檔那樣占用額外資源。
□文檔片段不能添加到文檔中，只會添加文檔片段作為“倉庫”保存的節(jié)點(diǎn)。
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()將文檔片段中內(nèi)容添加到文檔中。
11) Attr類型
□是節(jié)點(diǎn)，但特性不被認(rèn)為是DOM文檔樹的一部分。很少使用這類節(jié)點(diǎn)。
□Attr對象3個屬性：
◇name屬性：特性名稱（如nodeName）
◇value屬性：特性的值（如nodeValue）
◇specified屬性：布爾值，用以區(qū)別特性是在代碼中指定的還是默認(rèn)的。
□不建議直接訪問特性節(jié)點(diǎn)。建議用getAttribute()
setAttribute()、removeAttribute()方法。0

二、DOM擴(kuò)展
1. 呈現(xiàn)模式
①document對象的compatMode屬性
□值為“CSS1Compat”即標(biāo)準(zhǔn)模式。
□值為“BackCompact”即混雜模式。
②IE8為document對象引入documentMode新屬性，返回?cái)?shù)值：5（混雜模式）、7（仿真模式）、8（標(biāo)準(zhǔn)模式）
2. 滾動
□滾動方法都是作為HTMLElement類型的擴(kuò)展存在，可再元素節(jié)點(diǎn)上使用。
□scrollIntoView(bool)：滾動瀏覽器窗口或容器元素，以便在視口（viewport）中看到元素。（參數(shù)為true或省略，則滾動到頂部）。
□scrollIntoViewIfNeeded(bool)：只在當(dāng)前元素在視口中不可見的情況下，才滾動瀏覽器窗口或容器元素，讓當(dāng)前元素可見。（Safari和Chorme實(shí)現(xiàn)）。
□scrollByLines(lineCount)：將元素的內(nèi)容滾動指定的行數(shù)的高度，lineCount可為正/負(fù)數(shù)。（safari和Chrome可用）
3. children屬性
□children屬性中只包含元素的子節(jié)點(diǎn)中那些也是元素的節(jié)點(diǎn)。
□作為HTMLCollection對象。
□Firefox不支持，IE中的children集合會包含注釋節(jié)點(diǎn)。
4. contains()方法
□應(yīng)在作搜索起點(diǎn)的祖先節(jié)點(diǎn)上調(diào)用，傳入要檢測的節(jié)點(diǎn)作參數(shù)。返回true則傳入節(jié)點(diǎn)作為當(dāng)前節(jié)點(diǎn)后代。
□Firefox不支持contains()方法，在DOM3級實(shí)現(xiàn)替代的compareDocumentPosition()方法，確定兩個節(jié)點(diǎn)間關(guān)系。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. 操作內(nèi)容
①innerText屬性
□可讀取節(jié)點(diǎn)文檔書中由淺入深的所有文本。
□通過inner.Text屬性設(shè)置節(jié)點(diǎn)文本，會移除先前存在的所有子節(jié)點(diǎn)，完全改變了DOM樹。
□賦給此屬性的文本將自動進(jìn)行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;
}

function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML屬性
□讀取信息時，返回當(dāng)前元素所有子節(jié)點(diǎn)的HTML表現(xiàn)。
□寫入信息時，會按照指定的值創(chuàng)建新的DOM子樹，并以該子樹替換當(dāng)前元素的所有子節(jié)點(diǎn)。
□innerHTML限制：插入<script>元素不會被執(zhí)行。插入<style>也有類似問題。
□并不是所有元素都有innerHTML屬性。不支持的元素有<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>和<tr>。
③outerText屬性
□與innerText基本相同，區(qū)別在于寫入信息時，會替換包含節(jié)點(diǎn)
□Firefox不支持
□不建議使用。
④outerHTML屬性
□與innerHTML基本相同，區(qū)別在于寫入信息時，會替換包含節(jié)點(diǎn)。
□Firefox不支持
□不建議使用
⑤內(nèi)存與性能問題
□innerText、innerHTML、outerText、outerHTML替換子節(jié)點(diǎn)可能會導(dǎo)致瀏覽器的內(nèi)存問題。被刪除的子樹中的元素設(shè)置的事件處理程序或具有值為JS對象的屬性，依舊存在于內(nèi)存中。
□插入大量新HTML時，使用HTML要比通過多次DOM操作有效率得多。
三、DOM操作技術(shù)
1. 動態(tài)腳本
①插入外部文件：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
②指定JavaScript代碼方式
□IE中將<script>視為一個特殊元素，不允許DOM訪問其子節(jié)點(diǎn)。
兼容方式：
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
}
2. 動態(tài)樣式
①外部鏈接
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
②使用<style>元素來包含嵌入式CSS
□IE將<style>視為一個特殊的、與<script>類似的節(jié)點(diǎn)，不允許訪問其子節(jié)點(diǎn)。
□在重用一個<style>元素并再次設(shè)其styleSheet.cssText屬性，有可能導(dǎo)致瀏覽器崩潰。
fucnction loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3. 操作表格
①為<table>元素添加的屬性和方法
□caption：保存著對<caption>元素（如果有）地指針；
□tBodies：是一個<tobdy>元素的 HTMLCollection;
□tFoot：保存著對<tfoot>元素（如果有）的指針；
□tHead：保存著對<thead>元素（如果有）的指針；
□rows：是一個表格中所有行的HTMLCollection；
□createTHead()：創(chuàng)建<thead>元素，將其放到表格中，返回引用。
□createCaption()：
□deleteTHead()：刪除<thead>元素。
□deleteTFoot()：
□deleteCaption()：
□deleteRow(pos)：
□insertRow(pos)：向rows集合中指定位置插入一行。
②為<tbody>元素添加的屬性和方法有：
□rows：保存著<tbody>元素中行的HTMLCollection。
□deleteRow(pos)：刪除指定位置的行；
□insertRow(pos)：向rows集合中的指定位置插入一行，返回插入行的引用。
③為<tr>元素添加的屬性和方法
□cells：保存著<tr>元素中單元格的HTMLCollection；
□deleteCell(pos)：刪除指定位置的單元格。
□insertCell(pos)：向cells集合中指定位置插入一單元格，返回插入的單元格引用。
4. 使用NodeList
□NodeList及其“近親”NamedNodeMap（Element類型中的attribute屬性）和HTMLCollection，這三個集合都是“動態(tài)的”，每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時，它們都會得到更新。
□盡量減少訪問NodeList的次數(shù)。因每次訪問NodeList，都會運(yùn)行一次基于文檔的查詢?？煽紤]將從NodeList取得的值緩存起來。

第十一章 DOM2和DOM3
一、DOM變化
1. 針對XML命名空間的變化
①Node類型的變化
■DOM2級中，Node類型包含下列特定于命名空間的屬性。
□localName：不帶命名空間前綴的節(jié)點(diǎn)名稱。
□namespaceURI：命名空間URI，未指定則為null。
□prefix：命名空間前綴，未指定則為null。
■DOM3級
□isDefaultNamespace(namespaceURI)：指定的namespaceURI在當(dāng)前的默認(rèn)命名空間的情況下返回true。
□lookupNamespaceURI(prefix)：返回給定prefix的命名空間。
□lookupPrefix(namespaceURI)：返回給定namespaceURI的前綴。
②Document類型變化
■DOM2級中，與命名空間有關(guān)
□createElementNS(namespaceURI, tagName)：使用給定的tagName創(chuàng)建一個屬于命名空間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)：設(shè)置屬于命名空間namespaceURI的特性節(jié)點(diǎn)。
④NamedNodeMap類型的變化
□getNamedItemNS(namespaceURI, localName)
□removeNamedItemNS(namespaceURI, localName)
□setNamedItemNS(node)：添加node，這個節(jié)點(diǎn)已事先指定了命名空間信息。
2. 其他方面的變化
①DocumentType類型的變化
□新增3個屬性：publicId、systemId和internalSubset
□publicId、systemId表示文檔類型聲明中的兩個信息段。
□internalSubset：用于訪問包含在文檔類型聲明中的額外定義。
②Document類型的變化
□importNode()方法：從一個文檔中取得一個節(jié)點(diǎn)，然后將其導(dǎo)入到另一個文檔，使其成為文檔結(jié)構(gòu)的一部分。
◇每個節(jié)點(diǎn)都有一個ownerDocument屬性，表示所屬文檔。
◇appendChild()傳入節(jié)點(diǎn)屬于不同文檔，會導(dǎo)致錯誤。
◇importNode()方法與Element的cloneNode方法非常相似，接受兩個參數(shù)：要復(fù)制的節(jié)點(diǎn)和一個表示是否復(fù)制子節(jié)點(diǎn)的布爾值。返回原節(jié)點(diǎn)的副本，但能夠在當(dāng)前文檔中使用。
□defaultView屬性：保存著一個指針，指向擁有給定文檔的窗口（或框架）。
◇IE不支持此屬性，但有等價(jià)屬性parentWindow。
◇確定文檔歸屬窗口兼容代碼：
var parentWindow = document.defaultView || document.parentWindow;
□createDocuemntType()：創(chuàng)建一個新的DocumentType節(jié)點(diǎn)，接受三個參數(shù)：文檔類型名稱、publicId、systemId。
□createDocument()方法：創(chuàng)建新文檔。三個參數(shù)：針對文檔中元素的namespaceURI、文檔元素的標(biāo)簽名、新文檔的文檔類型。
□“DOM2級HTML”模塊為document.implementation新增一個方法，名叫createHTMLDocument()。只接受title中的文本作為參數(shù)。返回新HTML文檔。包括<html>、<head>、<title>和<body>。
③Node類型的變化
□isSupported()方法：與DOM1級中document.implementation引入的hasFeature()方法類似。用于確定當(dāng)前節(jié)點(diǎn)具有什么能力。兩個參數(shù)：特性名和特性版本號。
□isSameNode()方法：傳入節(jié)點(diǎn)，與引用節(jié)點(diǎn)為同一個節(jié)點(diǎn)則返回true。
□isEqualNode()方法：傳入節(jié)點(diǎn)，與引用節(jié)點(diǎn)相等返回true。
□setUserData()方法：將數(shù)據(jù)指定給節(jié)點(diǎn)。三個參數(shù)：要設(shè)置的鍵，實(shí)際的數(shù)據(jù)和處理函數(shù)。
◇處理函數(shù)接受5個參數(shù)：表操作類型的數(shù)值（1復(fù)制2導(dǎo)入3刪除4重命名）、數(shù)據(jù)鍵、數(shù)據(jù)值、源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)。
var div = document.createElement("div");
div.setUserData("name","Nicholas",fucntion(operation, key, value, src, dest){
if(operation == 1){
dest.setUserData(key,value);
}
});
④框架的變化
□框架和內(nèi)嵌框架分別用HTMLFrameElement和HTMLIFrameElement表示。
□contentDocument屬性：DOM2級中框架、內(nèi)框架的新屬性。此屬性包含一個指針，指向表示框架內(nèi)容的文檔對象。
□contentDocument屬性是Document類型實(shí)例，因此可以像使用其他HTML文檔一樣使用它，包括所有屬性和方法。
□IE8之前不支持框架中的contentDocument屬性，但支持一個叫contentWindow屬性，返回框架的window對象。
□訪問內(nèi)嵌框架文檔對象兼容代碼：
var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
二、樣式
1. 訪問元素的樣式
①style屬性
□支持style特性的HTML元素在JS中都有一個對應(yīng)的style屬性。
□這style對象是cssStyleDeclaration的實(shí)例，包含通過style特性指定的樣式。
□在style特性指定的任何CSS屬性都將表現(xiàn)為這個style對象的相應(yīng)屬性。對于使用短劃線的CSS屬性名，必須轉(zhuǎn)換成駝峰大小寫形式才能通過js訪問。其中float屬性不可直接使用。IE用styleFloat訪問，其他瀏覽器用cssFloat訪問。
□如果沒有為元素設(shè)置style特性，那style對象中可能會包含一些默認(rèn)值，但這些值不反映元素正確的樣式信息。
②DOM樣式屬性和方法
1）DOM2級還為style對象定義了一些屬性和方法。在提供特性值時也可修改樣式。
□cssText：訪問style特性中的css代碼。
□length：應(yīng)用給元素的css屬性數(shù)量。
□parentRule：表示css信息的CSSRule對象。
□getPropertyCSSValue(propertyName)：返回包含給定屬性值的CSSValue對象，含兩個屬性cssText和cssValueType。
□getProperytPriority(propertyName)：如果給定的屬性使用了!important設(shè)置，則返回“important”，否則返回空字符串。
□item(index)：返回給定位置的CSS屬性的名稱。
□removeProperyt(propertyName)：從樣式中刪除給定屬性。
□setProperty(propertyName, value, priority)：將給定屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)標(biāo)志（“important”或者一個空字符串）。
2）使用
□設(shè)計(jì)length屬性的目的，就是將其與item()方法配套使用。以便迭代元素中定義的css屬性。
□Firefox、Safari、Opera9及更高、chrome均支持這些屬性和方法。IE只支持cssText。
□getPropertyCSSValue()只有Safari和chrome支持。
③計(jì)算的樣式
□“DOM2級樣式”增強(qiáng)了document.defaultView，提供了getComputedStyle()方法。
□getComputedStyle()：2個參數(shù)：要取得計(jì)算樣式的元素和一個偽元素字符串（如:after）。如果不需要偽元素信息，第二個參數(shù)可以為null。返回一個CSSStyleDeclaration對象（與style屬性類型相同）。
□IE不支持getComputedStyle()方法。但I(xiàn)E中有style特性的元素均有一個currentStyle屬性（CSSStyleDeclaration的實(shí)例）包含當(dāng)前元素全部計(jì)算后的樣式。
□計(jì)算樣式兼容代碼：
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，后者可以作為一個基礎(chǔ)接口來定義非CSS樣式表。從StyleSheet接口繼承而來的屬性如下：
□disabled：表示樣式表是否被禁用的布爾值。可讀/寫。設(shè)為true則禁用。
□href：如果樣式表是通過<link>包含的，則是樣式表的URL，否則是null。
□media：當(dāng)前樣式表支持的所有媒體類型的集合。與所有DOM集合一樣，有l(wèi)ength屬性和item()方法。
□ownerNode：指向擁有當(dāng)前樣式表的節(jié)點(diǎn)的指針。若通過@import導(dǎo)入則屬性為null。IE不支持此屬性。
□parentStyleSheet：當(dāng)前樣式表是通過@import導(dǎo)入的情況下，這個屬性指向?qū)胨臉邮奖淼闹羔槨?
□title：ownerNode中title屬性的值。
□type：表示樣式表類型的字符串。對css樣式表而言，這個字符串是“type/css”。
■以上屬性除disabled外，全部只讀。
4）CSSStyleSheet在上述基礎(chǔ)上添加以下屬性和方法：
□cssRule：樣式表中包含的樣式規(guī)則的集合。IE不支持，但有類似的rules屬性。
□ownerRule：如果樣式表是通過@import導(dǎo)入的，這個屬性就是一個指針，指向表示導(dǎo)入的規(guī)則；否則為null。IE不支持這個屬性。
□deleRule(index)：刪除cssRules集合中指定位置的規(guī)則。IE不支持，但支持一類似的removeRule()方法。
□insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持，但支持類似的addRule()方法。
5）獲取樣式表對象
□應(yīng)用于文檔的所有樣式表是通過document.styleSheets集合來表示的。通過這個集合的length屬性可以獲取文檔中樣式表的數(shù)量，而通過方括號語法或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特性被設(shè)置為“stylesheet”的<link>元素引入的樣式表。
□可直接通過<link>或<style>元素取得CSSStyleSheet對象。DOM規(guī)定了一個包含CSSStyleSheet對象的屬性，名叫sheet；IE不支持，但I(xiàn)E支持類似的styleSheet屬性。
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一個<link>元素引入的樣式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);
②CSS規(guī)則
1）CSSRule對象表示樣式表中的每一條規(guī)則，是一個供其他多種類型繼承的基類型，其中最常見的就是CSSStyleRule類型，表示樣式信息。
2）CSSStyleRule對象包含下列屬性：
□cssText：返回整條規(guī)則對應(yīng)的文本，IE不支持。
□parentRule：如果當(dāng)前規(guī)則是導(dǎo)入的規(guī)則，這屬性引用的就是導(dǎo)入規(guī)則；否則這個值為null。IE不支持。
□parentStyleSheet：當(dāng)前規(guī)則所屬的樣式表。IE不支持。
□selectorText：返回當(dāng)前規(guī)則的選擇符文本。
□style：一個CSSStyleDeclaration對象，可以通過它設(shè)置和取得規(guī)則中特定的樣式值。
□type：表示規(guī)則類型的常量值。對于樣式規(guī)則，這個值是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";
③創(chuàng)建規(guī)則
□insertRule()方法：接受兩個參數(shù)：規(guī)則文本和表達(dá)在哪里插入規(guī)則的索引。//IE不支持
sheet.insertRule("body{background-color:silver}",0); //DOM方法。
□addRule()：IE中支持。兩個必選參數(shù)：選擇符文本和CSS樣式信息。一個可選參數(shù)：插入規(guī)則的位置。//僅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);
}
}
調(diào)用：insertRule(document.styleSheets[0], "body", "background-color:red", 0);
□當(dāng)需要添加的規(guī)則多時，操作繁瑣。建議采用動態(tài)加載樣式表。
④刪除規(guī)則
□sheet.deleteRule(0); //DOM方法，IE不支持
Sheet.removeRule(0); //IE方法，兩者都是傳入要刪除的規(guī)則的位置。
□跨瀏覽器兼容：
function deleteRule(sheet, index){
if(sheet.deleteRule){
Sheet.deleteRule(index);
}else if(sheet.removeRule){
Sheet.removeRule(index);
}
}
調(diào)用方式：deleteRule(document.styleSheets[0],0);
□這種做法不是實(shí)際web開發(fā)中常見做法。刪除規(guī)則會影響CSS層疊效果。慎用。
3. 元素大?。ǚ荄OM2級樣式，但所有瀏覽器支持）
①偏移量（offset dimension）
定義：包括元素在屏幕上占用的所有可見的空間。元素的可見大小由其高度、寬度決定，包括所有內(nèi)邊距、滾動條和邊框大?。ㄗ⒁猓话ㄍ膺吘啵?
□offsetHeight：元素在垂直方向上占用的空間大小，以像素計(jì)。
□offsetWidth：元素在水平方向上占用的空間大小，以像素計(jì)。
□offsetLeft：元素左邊框至包含的左內(nèi)邊框之間的像素距離。
□offsetTop：元素的上邊框至包含元素的上內(nèi)邊框之間的像素距離。
△其中offsetLeft和offsetTop屬性與包含元素有關(guān)，包含元素的引用保存在offsetParent屬性中。offsetParent屬性不一定與parentNode的值相等。
△這些屬性是只讀的，每次訪問需要重新計(jì)算。若重復(fù)使用，應(yīng)保存在局部變量中。
②客戶區(qū)大小（client dimension）
元素內(nèi)容及其內(nèi)邊距所占大小。滾動條占用空間不算在內(nèi)。
□clientWidth屬性：元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度。
□clientHeight屬性：元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度。
□確定瀏覽器視口大小可用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
};
}
}
③滾動大小
指包含滾動內(nèi)容的元素的大小。
□scrollHeight：在沒有滾動條的情況下，元素內(nèi)容的總高度。
□scrollWidth：在沒有滾動條的情況下，元素內(nèi)容的總寬度。
□scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。通過設(shè)置這個屬性可以改變元素的滾動位置。
□scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。通過設(shè)置這個屬性可以改變元素的滾動位置。
◇在確定文檔的總高度時（包括基于視口的最小高度時），必須取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，保證跨瀏覽器。
Var docHeight = Max.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
Var docWidth = Max.max(document.documentElement.scrollWidth,document.docuemntElement.clientWidth);
注：對于運(yùn)行在混雜模式下的IE，則需要用document.body代替document.documentElement。
◇通過scrollLeft和scrollTop屬性既可以確定元素當(dāng)前的滾動狀態(tài)，也可以設(shè)置元素滾動位置。
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
④確定元素大小
□IE、Firefox3及更高和Opera9.5及更高為每一個元素提供了一個getBoundingClientRect()方法。這個方法返回一個矩形對象，含4個屬性：left、top、right和bottom。這些屬性給出了元素在頁面中相對于視口的位置。但I(xiàn)E認(rèn)為左上角坐標(biāo)為(2,2)，其他瀏覽器認(rèn)為是(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結(jié)構(gòu)的類型：NodeIterator和TreWalker。這兩個類型能夠基于給定的起點(diǎn)對DOM結(jié)構(gòu)執(zhí)行深度優(yōu)先（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()方法創(chuàng)建它的新實(shí)例。
接受4個參數(shù)：
□root：想要作為搜索起點(diǎn)的樹種的節(jié)點(diǎn)。
□whatToShow：表示要訪問哪些節(jié)點(diǎn)的數(shù)字代碼。
□filter：是一個NodeFilter對象，或者一個表示應(yīng)該接受還是拒絕某種特定節(jié)點(diǎn)的函數(shù)。
□entityReferenceExpansion：布爾值，表示是否要擴(kuò)展實(shí)體引用。此參數(shù)在HTML頁面中沒有用。
■whatToShow參數(shù)是一個位掩碼，其值以常量形式在NodeFilter類型中定義。
□NodeFilter.SHOW_ALL：顯示所有類型的節(jié)點(diǎn)。
□NodeFilter.SHOW_ELEMENT：顯示元素節(jié)點(diǎn)。
□NodeFilter.SHOW_ATTRIBUTE：顯示特性節(jié)點(diǎn)。由于DOM結(jié)構(gòu)原因，實(shí)際上不能使用這個值。
□NodeFilter.SHOW_TEXT：顯示文本節(jié)點(diǎn)。
□NodeFilter.SHOW_CDATA_SECTION：顯示CDATA節(jié)點(diǎn)。對HTML無用。
□NodeFilter.SHOW_ENTITY_REFERENCE：顯示實(shí)體引用節(jié)點(diǎn)。對HTML無用。
□NodeFilter.SHOW_ENTITYPE：顯示實(shí)體節(jié)點(diǎn)。對HTML無用。
□NodeFilter.SHOW_PROCESSING_INSTRUCTION：顯示處理指令節(jié)點(diǎn)。對HTML無用。
□NodeFilter.SHOW_COMMENT：顯示注釋節(jié)點(diǎn)。
□NodeFilter.SHOW_DOCUMENT：顯示文檔節(jié)點(diǎn)。
□NodeFilter.SHOW_DOCUMENT_TYPE：顯示文檔類型節(jié)點(diǎn)。
□NodeFilter.SHOW_DOCUMENT_FRAGMENT：顯示文檔片段節(jié)點(diǎn)。對HTML無用。
□NodeFilter.SHOW_NOTATION：顯示符號節(jié)點(diǎn)。對HTML無用。
◇除了NodeFilter_SHOW_ALL外，可以使用按位或操作符來組合多個選項(xiàng)。
var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
◇用filter參數(shù)自定義NodeFilter對象或一個過濾器函數(shù)。
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參數(shù)也可以是一個與acceptNode方法類似的函數(shù)。
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結(jié)構(gòu)的方法：
□parentNode()：遍歷到當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。
□firstChild()：遍歷到當(dāng)前節(jié)點(diǎn)的第一個子節(jié)點(diǎn)。
□lastChild()：便歷到當(dāng)前節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)。
□nextSibling()：遍歷到當(dāng)前節(jié)點(diǎn)的下一個同輩節(jié)點(diǎn)。
□previousSibling()：遍歷到當(dāng)前節(jié)點(diǎn)的上一個同輩節(jié)點(diǎn)。
2）創(chuàng)建TreeWalker對象要使用document.createTreeWalker()方法，接受4個參數(shù)，與document.createNodeIterator()方法相同。
□其中第3個參數(shù)filter返回值除了可以返回NodeFilter.FITER_ACCEPT和NodeFilter.FILTER_SKIP外，還可以使用NodeFILTER_REJECT（作用：跳過相應(yīng)的節(jié)點(diǎn)及該節(jié)點(diǎn)的整個子樹）。
□TreeWalker強(qiáng)大之處在于能夠在DOM結(jié)構(gòu)中沿任何方向移動。
◇例：遍歷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，表示任何遍歷方法在上一次遍歷中返回的節(jié)點(diǎn)。
四、范圍
基本定義：
通過范圍可以選擇文檔中的一個區(qū)域，而不必考慮節(jié)點(diǎn)的界限（選擇在后臺完成，對用戶看不見）。在常規(guī)DOM操作中不能更有效地修改文檔時，使用范圍往往可以達(dá)到目的。
1.DOM中的范圍
①概況：
1）DOM2級在Document類型中定義了createRange()方法。
□檢查是否支持范圍：
var supportsRange = document.implementation.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof document.createRange == "function");
□創(chuàng)建DOM范圍: var range = document.createRange();
2）Range類型實(shí)例中，提供當(dāng)前范圍在文檔中的位置信息的屬性：
□startContainer：包含范圍起點(diǎn)的節(jié)點(diǎn)（即選取中第一個節(jié)點(diǎn)的父節(jié)點(diǎn)）
□startOffset：范圍在startContainer中起點(diǎn)的偏移量。如StartContainer是文本節(jié)點(diǎn)，則startOffset就是范圍起點(diǎn)之前跳過的字符數(shù)量。否則，startOffset就是范圍中第一個子節(jié)點(diǎn)在父節(jié)點(diǎn)中的索引。
□endContainer：包含范圍終點(diǎn)的節(jié)點(diǎn)（即選取最后一個節(jié)點(diǎn)的父節(jié)點(diǎn)）。
□endOffset：范圍在endContainer中終點(diǎn)的偏移量（規(guī)則如startoffset）
□commonAncestorContainer：startContainer和endContainer共同的祖先節(jié)點(diǎn)在文檔樹種位置最深的那個。
②用DOM范圍實(shí)現(xiàn)簡單選擇：
1）使用范圍選擇文檔中的一部分：
□selectNode()：傳入一個DOM節(jié)點(diǎn)，選擇整個節(jié)點(diǎn)，包括子節(jié)點(diǎn)作范圍。
□selectNodeContents()：傳入一個DOM節(jié)點(diǎn)，只選擇子節(jié)點(diǎn)作范圍。
2）更精細(xì)地控制范圍：
□setStartBefore(refNode)：將范圍的起點(diǎn)設(shè)置在refNode之前，因此refNode也就是范圍選取中第一個子節(jié)點(diǎn)。范圍的位置屬性自動更新。
□setStartAfter(refNode)：
□setEndBefore(refNode)：
□setEndAfter(refNode)：
③用DOM范圍實(shí)現(xiàn)復(fù)雜選擇：
□setStart()：傳入一個參照點(diǎn)和一個偏移量。參照節(jié)點(diǎn)成startContainer，而偏移量成startOffset。
□setEnd()：傳入一參照點(diǎn)和一個偏移量。參照節(jié)點(diǎn)成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范圍中的內(nèi)容
□在調(diào)用操作方法時，后臺會為范圍創(chuàng)建有效的文檔片段及DOM結(jié)構(gòu)。P275
□deleteContents()：從文檔中刪除范圍所包含的內(nèi)容。
□extractContents()：從文檔中刪除范圍內(nèi)容，返回范圍文檔片段。
⑤插入DOM范圍中的內(nèi)容
□insertNode()：向范圍選區(qū)的開始處插入一個節(jié)點(diǎn)。
□surroundContents()：接受一個參數(shù)，即環(huán)繞范圍內(nèi)容的節(jié)點(diǎn)。
a.提取出范圍中的內(nèi)容（類似執(zhí)行extractContent()）
b.將給定節(jié)點(diǎn)插入到文檔中原來范圍所在的位置上。
c.將文檔片段的內(nèi)容添加到給定節(jié)點(diǎn)中。
⑥折疊DOM范圍
□所謂折疊范圍，就是指范圍中未選擇文檔的任何部分。
□collapse()方法：一個參數(shù)布爾值。true折疊到范圍起點(diǎn)，false折疊到范圍終點(diǎn)?？梢杂胏ollapsed屬性檢查是否已經(jīng)折疊。
range.collapse(true); //折疊到起點(diǎn)
alert(range.collapsed); //輸出true
⑦比較DOM范圍
在有多個范圍的情況下，可以使用compareBoundaryPoints()方法來確定這些范圍是否有公共的邊界（起點(diǎn)或終點(diǎn)）。兩個參數(shù)：表示比較方式的常量和要比較的范圍。
比較方式常量值：
□Range.START_TO_START(0)：比較第一個范圍和第二個范圍起點(diǎn)。
□Range.START_TO_END(1)：
□Range.END_TO_END(2)：
□Range.END_TO_STRAT(3)：
⑧復(fù)制DOM范圍
□cloneRange()方法：var newRange = range.cloneRange();
⑨清理DOM范圍
□調(diào)用detach()方法，從文檔分離出范圍。
range.detach(); //從文檔中分離
range = null; //解除引用
2.IE中的范圍
①概況：
□IE不支持DOM范圍。支持類似的文本范圍（text range）。
□文本范圍處理的主要是文本（不一定是DOM節(jié)點(diǎn)）。通過<body>、<button>、<input>和<textarea>等元素調(diào)用createTextRange()方法。
□通過document創(chuàng)建的范圍可以在頁面中的任何地方使用。
var range = document.body.createTextRange();
②用IE范圍實(shí)現(xiàn)簡單選擇
□findText()方法：找到第一次出現(xiàn)的給定文本，并將范圍移過來以環(huán)繞該文本。返回布爾值，表示是否找到文本。
◇使用text屬性可返回范圍中文本。
var range = document.body.createTextRange();
var found = range.findText("Hello");
◇可為findText傳入另一個參數(shù)，負(fù)值即當(dāng)前位置向后搜，正值則向前搜。
□moveToElementText()方法：類似DOM中selectNode()方法。接受一個DOM元素，并選擇該元素的所有文本，包括HTML標(biāo)簽。
◇范圍可用htmlText屬性取得范圍全部內(nèi)容，包括HTML。
③使用IE范圍實(shí)現(xiàn)復(fù)雜選擇
□4個方法：move()、moveStart()、moveEnd()、expand()；兩個參數(shù)：移動單位和移動單位數(shù)量。移動單位為以下一種字符串：
◇"character"：逐個字符地移動。
◇"word"：逐個單詞（一系列非空格字符地移動）
◇"sentence"：逐個句子（一系列句號、問好或感嘆號結(jié)尾的字符地移動）
◇"textedit"：移到當(dāng)前范圍選取的開始或結(jié)束位置。
□moveStart()：移動到范圍起點(diǎn)；moveEnd()移動到范圍終點(diǎn)。
□expand()：將任何部分選擇的文本全部選中。
□move()方法：首先會折疊當(dāng)前范圍（起點(diǎn)終點(diǎn)相等），然后將范圍移動指定的單位數(shù)量。
④操作IE范圍中的內(nèi)容
□范圍僅含文本可通過text屬性讀寫文本。
□pasteHTML()方法：向范圍插入HTML代碼。
⑤折疊IE范圍
□collapse()方法：傳入布爾值，true折疊到起點(diǎn)，false折疊到終點(diǎn)。
□檢查折疊是否完畢：boundingWidth屬性等于0
var isCollapse = (range.boundingWidth == 0);
⑥比較IE范圍
□compareEndPoints()方法：兩個參數(shù)：比較類型和要比較的范圍。
◇比較類型取值字符串：“startToStart”“StartToEnd”、“EndToEnd”和“EndToStart”。
◇如果第一個范圍邊界位于第二個前，返回-1；相等返回0；在后面返回1.
□isEquanl()用于確定兩個范圍是否相等。
□inRange()用于確定一個范圍是否包含另一個范圍。
⑦復(fù)制IE范圍
使用duplicate()方法，復(fù)制文本范圍，返回副本。
var newRange = range.duplicate();

您可能感興趣的文章: