DOM · JavaScript半知半解

## DOM **1、DOM** 文檔對象模型（Document Object Model，**DOM**）是表示和操作HTML和XML文檔內容的基礎API。當網頁被加載時，瀏覽器會根據DOM模型，將結構化文檔（比如HTML和XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。如下圖： ![](https://box.kancloud.cn/65a17e89fc41b994c089e66737967bf7_563x271.png) 上圖中的每一個方框是文檔的一個節點，它表示一個Node對象，而所有節點組成了節點樹（DOM樹）。節點有7種類型： ``` Document：整個文檔樹的頂層節點 DocumentType：doctype標簽（比如<!DOCTYPE html>） Element：網頁的各種HTML標簽（比如<body>、<a>等） Attribute：網頁元素的屬性（比如class="right"） Text：標簽之間或標簽包含的文本 Comment：HTML或XML的注釋 DocumentFragment：文檔的片段 Document和Element是兩個重要的DOM類。 ``` **1.1節點之間的關系** 在一個節點之上的直接節點是其 `父節點` ，在其下一層的直接節點是其 `子節點` 。在同一層上具有相同父節點的節點是 `兄弟節點` 。在一個節點之下的所有層級的一組節點是其 `后代節點` 。一個節點的任何父節點、祖父節點和其上層的所有節點是 `祖先節點` 。通用的`Document`和`Element`類型與`HTMLDocument`和`HTMLElement`類型之間是有嚴格區別的。 `Document`類型代表一個HTML或XML文檔，`Element`類型代表該文檔中的一個元素。 `HTMLDocument`和`HTMLElement`子類只是針對于HTML文檔和元素。 `CharacterData`通常是`Text`和`Comment`的祖先，它定義兩種節點所共享的方法。 `Attr`節點類型代表XML或HTML屬性。 `Element`類型定義了將屬性當做“名/值”對使用的方法。 `DocumentFragment`類型在實際文檔中并不存在的一種節點，它代表一系列沒有常規父節點的節點。 **1.2 選取文檔元素** 在JavaScript中，有多種方法選取元素。 - 用指定的id屬性 - 用指定的name屬性 - 用指定的標簽名字 - 用指定的CSS類 - 匹配指定的CSS選擇器 **1.2.1 用指定ID選取元素** 任何HTML元素都可以有一個id元素，但在文檔中該值必須唯一，即同一個文檔中的元素不能出現有相同的ID。可以用`Document`對象的`getElementById()`方法選取特定ID的元素。 ``` <div id="div"></div> document.getElementById('div'); ``` **1.2.2 用指定名字選取元素** 一些HTML元素擁有`name`屬性（比如`<form>、<radio>、<img>、<frame>、<embed>和<object>`等），非唯一，所以多個元素可能有相同的名字。基于name屬性的值選取HTML元素，可以使用`Document`對象的`getElementsByName()`方法，返回一個NodeList對象（類數組對象）。 ``` <input name="input"/> var inputs = document.getElementsByName('input'); inputs[0].tagName //input ``` 注意：getElementsByName()定義在HTMLDocument類中，而不在Document類中，所以它只針對HTML文檔可用，在XML中不可用。 **1.2.3 用指定標簽名選取元素** `Document`對象的`getElementsByTagName()`方法可用來選取指定類型（標簽名）的所有HTML或XML元素，也是返回一個NodeList對象 ``` document.getElementsByTagName('span') // 選取所有span元素 ``` 給`getElementsByTagName()`傳遞通配符參數“*”，將獲得一個代表文檔中所有元素的NodeList對象。在`Element`類中也同樣定義了`getElementsByTagName()`方法，其原理和Document版本是一樣的，不過它只選取調用該方法的元素的后代元素。下面的代碼就是查找文檔中第一個<p>元素里面的所有<span>元素。 ``` var p = document.getElementsByTagName('p')[0]; var span = p.getElementsByTagName('span'); ``` **1.2.4 用指定CSS類選取元素** HTML元素的`class`屬性值是一個以空格隔開的列表，可以為空或包含多個標識符。在HTML文檔和HTML元素上，我們可以調用`getElementsByClassName()`來選擇指定CSS類的元素，它返回一個實時的NodeList對象，包含文檔或元素所有匹配的后代節點。 `getElementsByClassName()`只需要一個字符串參數，但是該字符串可以由多個空格隔開的標識符組成，只有當元素的class屬性值包含所有指定的標識符時才匹配。在`Element`類中也同樣定義了`getElementsByClassName()`方法，其原理和Document版本是一樣的，不過它只選取調用該方法的元素的后代元素。 **1.2.5 通過CSS選擇器選取元素** `Document`對象的方法`querySelectorAll()`，它接受一個CSS選擇器的字符串參數，返回一個代表文檔中匹配選擇器的所有元素的NodeList對象，并不是實時的。如果沒有匹配的元素，則返回一個空的NodeList對象。 ``` document.querySelectorAll('.div') //匹配所有class名為div的元素 ``` 還有一個`querySelector()`方法，其原理和`querySelectorAll()`是一樣的，不過它返回第一個匹配的元素（以文檔順序），如果沒有匹配的元素就返回null。它們支持復雜的CSS選擇器。 ``` // 選中data-tip屬性等于title的元素 document.querySelectorAll('[data-tip="title"]'); // 選中div元素，那些class含ignore的除外 document.querySelectorAll('div:not(.ignore)'); ``` 但是，它們不支持CSS偽元素的選擇器（比如:first-line和:first-letter）和偽類的選擇器（比如:link和:visited），即無法選中偽元素和偽類。這兩個方法在`Element`節點上也有定義。 **1.2.6 document.all[ ]** document.all[ ]也可用來選擇元素，不過已經廢棄了。 ``` document.all[0] //文檔中第一個元素 document.all['navbar'] // id或name為“navbar”的元素 ``` **1.3 文檔結構和遍歷** **1.3.3 作為節點樹的文檔** `Document`對象、它的`Element對象`和文檔中表示文本的Text對象都是Node對象。 Node屬性： **（1）parentNode** 該節點的父節點，或者針對類似Document對象應該是null，因為它沒有父節點。 **（2）childNodes** 返回只讀的類數組對象（NodeList對象），它是該節點的子節點的實時表。注意：該屬性還包括文本節點和評論節點。 **（3）firstChild、lastChild** 該節點的子節點中的第一個和最后一個，如果該節點沒有子節點則為null 注意：這兩個屬性返回的除了HTML元素子節點，還可能是文本節點或評論節點。 **（4）nextSibling、previousSibling** 該節點的兄弟節點中的前一個和下一個。具有相同父節點的兩個節點稱為兄弟節點。節點的順序反映了它們在文檔中出現的順序。這兩個屬性將節點之間以雙向鏈表形式連接起來。注意：這兩個屬性返回的除了HTML元素子節點，還可能是文本節點或評論節點。 **（5）textContent** 返回該節點和它的所有后代節點的文本內容。 ``` <div id="div">我是<span>textContent</span></div> document.getElementById('div').textContent // 我是textContent ``` **（6）nodeType** 該節點的類型。 9：Document節點 1：Element節點 3：Text節點 8：Comment節點 11：DocumentFragment節點 **（7）nodeValue** Text節點或者Comment節點的文本內容。只有Text節點和Comment節點的nodeValue可以返回結果，其他類型的節點一律返回null。 **（8）nodeName** 元素的標簽名，以大寫形式表示。 **nodeType和nodeName** ![](https://box.kancloud.cn/dc61fd75984e2ff6ddc9f7146ff35719_532x306.png) 使用這些node屬性，我們可以便捷的得到各個節點的引用 ``` document.childNodes[0].childNodes[1] //等價于 document.firstChild.firstChild.nextSibling ``` **1.3.4 作為元素樹的文檔** 當我們的關注點在文檔的元素上而非它們之間的文本上時，JavaScript提供了另外一個API，它將文檔看做是E樂門頭對象樹，忽略部分文檔：Text和Comment節點。 **屬性** **（1）children** 類似childNodes，返回一個NodeList對象，但children列表只包含Element對象。 **注意**：Text和Comment節點沒有children屬性，意味著node.parentNode屬性不可能返回Text或Comment節點。任何Element的parentNode總是另一個Element，或者，追溯到樹根的Document或DocumentFragment節點。 **（2）firstElementChild、lastElementChild** 類似firstChild和lastChild，但只代表`子Element`。 **（3）nextElementSibling、previousElementSibling** 類似nextSibling和previousSibling，但只代表`兄弟Element`。 **（4）childElementCount** 子元素的數量。返回的值和`children.length`值相等。 **（5）offsetParent** offsetParent屬性返回當前HTML元素的最靠近的、并且CSS的position屬性不等于static的父元素。如果某個元素的所有上層節點都將position屬性設為static，則Element.offsetParent屬性指向`<body>`元素。 **1.4NodeList對象和HTMLCollection對象** **1.4.1 NodeList對象** NodeList實例對象是一個`類數組對象`，它的成員是節點對象。比如node.childNodes、document.querySelectorAll()返回的都是NodeList實例對象。 ``` document.childNodes instanceof NodeList //true ``` NodeList實例對象可能是動態集合，也可能是靜態集合。所謂動態集合就是一個活的集合，DOM樹刪除或新增一個相關節點，都會立刻反映在NodeList接口之中。Node.childNodes返回的，就是一個動態集合。 NodeList接口實例對象提供length屬性和數字索引，因此可以像數組那樣，使用數字索引取出每個節點，但是它本身并不是數組，不能使用pop或push之類數組特有的方法。 **1.4.2 HTMLCollection對象** HTMLCollection實例對象與NodeList實例對象類似，也是節點的集合，返回類數組對象。在HTMLDocument類中，有一些快捷屬性來訪問各種各樣的節點。比如：images、forms和links等屬性指向類數組的`<img>`、`<form>`和`<a>`（只包含那些有href屬性的`<a>`標簽）元素集合。這些屬性都是返回HTMLCollection實例對象。 HTMLDocument也定義了embeds和plugins屬性，它們是同義詞，都是HTMLCollection類型的`<embed>`元素的集合。anchors是非標準屬性，它指代有一個name屬性的`<a>`元素。在HTML5中，加入了scripts，它是HTMLCollection類型的<script>元素的集合。 HTMLDocument對象還定義了兩個屬性，它們指代特殊的單個元素而非元素的集合。 document.body是一個HTML文檔的`<body>`元素，document.head是`<head>`元素。如果文檔源代碼未顯式的包含`<head>`和`<body>`元素，瀏覽器將隱式的創建它們。 Document類的documentElement屬性指代文檔的根元素，在HTML文檔中，它總是指代`<html>`元素。 **HTMLCollection與NodeList的區別：** - HTMLCollection實例對象的成員只能是Element節點，NodeList實例對象的成員可以包含其他節點。 - HTMLCollection實例對象都是動態集合，節點的變化會實時反映在集合中。NodeList實例對象可以是靜態集合。 - HTMLCollection實例對象可以用id屬性或name屬性引用節點元素，NodeList只能使用數字索引引用。 HTMLCollection實例的item方法，可以根據成員的位置參數（從0開始），返回該成員。如果取不到成員或數字索引不合法，則返回null。 HTMLCollection實例的namedItem方法根據成員的ID屬性或name屬性，返回該成員。如果沒有對應的成員，則返回null。這個方法是NodeList實例不具有的。 **1.5 元素的內容** **1.5.1 作為HTML的元素內容** **（1）innerHTML** 讀取Element的 innerHTML 屬性作為字符串標記返回那個元素的內容。 ``` <div id="div"><p>123</p></div> var d = document.getElementById('div'); d.innerHTML // "<p>123</p>" ``` 除了獲取，還可以設置 ``` d.innerHTML = '<span>99</span>' // <div id="div"><span>99</span></div> ``` **（2）outerHTML** outerHTML屬性返回一個字符串，內容為指定元素節點的所有HTML代碼，包括它自身和包含的所有子元素。 ``` d.outerHTML // "<div id="div"><p>123</p></div>" ``` outerHTML屬性是可讀寫的，當設置元素的outerHTML時，元素本身被新的內容所替換。注意：只有Element節點有outerHTML屬性，Document節點沒有。 **（3）insertAdjacentHTML()** 將任意的HTML標記字符插入到指定的元素“相鄰”的位置。傳入兩個參數：標記是該方法的第二個參數，并且“相鄰”的精確含義依賴于第一個參數的值；第一個參數有以下值之一的字符串：“beforebegin”、“afterbegin”、“beforeend”和“afterend”。如下圖： ![](https://box.kancloud.cn/bdcb1231290e26afb1593e3e3a400077_747x115.png) **1.5.2 作為純文本的元素內容** 當要查詢純文本形式的元素內容或在文檔中插入純文本（不必轉義HTML標記中使用的尖括號后臺&符號）時，我們使用node的textContent屬性來實現： ``` <div id="div"><p>123</p></div> var d = document.getElementById('div'); d.textContent //123 ``` textContent屬性就是將指定元素的所有后代Text節點簡單的串聯在一起。 textContent是可讀寫的： ``` d.textContext = '<span>45</span>'; //<span>45</span> ``` 上面代碼在插入文本時，會將`<span>`標簽解釋為文本，而不會當作標簽處理。注意：在IE中，使用innerText替代textContent。 **1.6 創建、插入和刪除節點** **1.6.1 創建節點** **（1）createElement()** 創建新的Element節點可以使用Document對象的createElement()方法。給方法傳遞一個元素的標簽名作為參數（對HTML文檔來說該標簽名是不區分大小寫的） ``` var span = document.createElement('span') ``` **（2）createTextNode()** 創建一個Text節點，參數為所要生成的文本節點的內容。 ``` var newnode = document.createTextNode('content') ``` **（3）createAttribute()** 生成一個新的屬性對象節點，并返回它。參數是屬性的名稱。 **（4）cloneNode()** 用來復制已存在的節點。每個節點有一個cloneNode()方法，返回該節點的一個全新副本。傳遞一個可選的布爾值為參數，如果參數true則同時克隆該節點的所有后代節點，否則只克隆該節點，默認為false。 **1.6.2 插入節點** 我們可以用node的方法`appendChild()`或`insertBefore()`來講新節點插入到文檔中。 **（1）appendChild()** 接受一個節點對象作為參數，將其作為最后一個子節點，插入當前節點。 ``` parentNode.appendChild(newNode) ``` **（2）insertBefore()** 用于將某個節點插入當前節點的指定位置。它接受兩個參數，第一個參數是所要插入的節點，第二個參數是當前節點的一個子節點，新的節點將插在這個節點的前面。該方法返回被插入的新節點。 ``` parenNode.insertBefore(newNode,oldNode) ``` 注意：調用上面兩個方法時，如果要插入的節點是已存在文檔中的，那個節點將自動從它當前的位置移除并在新的位置重新插入。 Node對象并不存在insertAfter方法，如果你要將新節點插入到該節點的后面時，可以這樣寫： ``` function insertAfter(parentNode,newNode,oldNode){ if(oldNode.nextSibling){ parentNode.insertBefore(newNode,oldNode.nextSibling); }else{ parentNode.appendChild(newNode); } } ``` **1.6.3 刪除和替換節點** **（1）removeChild()** 從文檔樹中刪除一個節點。注意：該方法不是在待刪除的節點上調用，而是在其父節點上調用。在父節點上調用該方法，并將需要刪除的子節點作為方法參數傳遞給它。 ``` n.parentNode.removeChild(n); ``` **（2）replaceChild()** 刪除一個子節點并用一個新節點替換它。也是在父節點上調用該方法，第一個參數是新節點，第二個參數是需要替代的節點。 ``` var span = document.createElement('span'); n.parentNode.replaceChild(span,n); ``` **1.6.4 DocumentFragment** DocumentFragment（文檔片段）是一種特殊的Node，它作為其他節點的一個臨時的容器，并不存在于文檔中。 ``` var frag = docment.createDocumentFragment(); ``` DocumentFragment是獨立的，而不是任何其他文檔的一部分。它的parentNode總是為null。但類似Element，它可以有任意多的子節點，也可以使用appendChild()等方法。 DocumentFragment的特殊之處在于它使得一組節點被當做一個節點看待。 **1.7盒狀模型** **1.7.1 文檔坐標和視口坐標** 元素的位置是以像素來度量的，向右代表X坐標的增加，向下代表Y坐標的增加。 `坐標系的原點`：元素的X和Y坐標可以相對于文檔的左上角或者相對于其顯示文檔的視口的左上角。 `視口`：實際顯示文檔內容的瀏覽器的一部分，不包括瀏覽器“外殼”（如菜單、工具條和標簽頁）。 `文檔`：是基于整個網頁。 **1.7.2 查詢元素的幾何尺寸** 我們可以調用`getBoundingClientRect()`方法來判定一個元素的尺寸和位置。它不需要參數，返回一個有width、height、left、right、top和bottom屬性的對象。 `getBoundingClientRect()`方法返回元素在視口坐標中的位置。 `getBoundingClientRect`方法返回的rect對象，具有以下屬性（全部為只讀）。 ``` x：元素左上角相對于視口的橫坐標 left：元素左上角相對于視口的橫坐標，與x屬性相等 right：元素右邊界相對于視口的橫坐標（等于x加上width） width：元素寬度（等于right減去left） y：元素頂部相對于視口的縱坐標 top：元素頂部相對于視口的縱坐標，與y屬性相等 bottom：元素底部相對于視口的縱坐標 height：元素高度（等于y加上height）由于元素相對于視口（viewport）的位置，會隨著頁面滾動變化，因此表示位置的四個屬性值，都不是固定不變的。如果想得到絕對位置，可以將left屬性加上window.scrollX，top屬性加上window.scrollY。注意：getBoundingClientRect方法的所有屬性，都把邊框（border屬性）算作元素的一部分。也就是說，都是從邊框外緣的各個點來計算。因此，width和height包括了元素本身 + padding + border。 ``` **1.7.2 判斷元素在某點** `elementFromPoint()`方法，傳遞X和Y坐標（使用視口坐標），該方法返回在指定位置的一個元素。 **1.7.3 滾動** `Element.scrollLeft`屬性表示網頁元素的水平滾動條向右側滾動的像素數量，`Element.scrollTop`屬性表示網頁元素的垂直滾動條向下滾動的像素數量。對于那些沒有滾動條的網頁元素，這兩個屬性總是等于0。如果要查看整張網頁的水平的和垂直的滾動距離，要從document.body元素上讀取。 ``` document.body.scrollLeft document.body.scrollTop ``` 這兩個屬性都可讀寫，設置該屬性的值，會導致瀏覽器將指定元素自動滾動到相應的位置。 **scrollTop()** 也可以調用window對象的scrollTop()方法來滾動，接受一個點的X和Y坐標（文檔坐標），并作為滾動條的偏移量設置它們。 **scrollBy()** 用于將網頁移動指定距離，單位為像素。它接受兩個參數：向右滾動的像素，向下滾動的像素。 **scrollIntoView()** 該方法保證了元素在視口中可見。在默認情況下，它試圖將元素的上邊緣放在或盡量接近視口的上邊緣。如果只傳遞false作為參數，它將試圖將元素的下邊緣放在或盡量靠近視口的下邊緣。默認true。類似錨點滾動。 **1.7.4 屬性** 所有文檔元素都有下面的屬性： **（1）clientWidth、clientHeight** `clientHeight` 屬性返回元素節點可見部分的高度， `clientWidth`屬性返回元素節點可見部分的寬度。所謂“可見部分”，指的是不包括溢出（overflow）的大小，只返回該元素在容器中占據的大小，對于有滾動條的元素來說，它們等于滾動條圍起來的區域大小。這兩個屬性的值不包括滾動條、邊框和Margin，只包含內容和它的內邊距，單位為像素。對于整張網頁來說，當前可見高度（即視口高度）要從document.documentElement對象上獲取，等同于window.innerHeight屬性減去水平滾動條的高度。沒有滾動條時，這兩個值是相等的；有滾動條時，前者小于后者。 ``` var rootElement = document.documentElement; // 沒有水平滾動條時 rootElement.clientHeight === window.innerHeight // true // 沒有垂直滾動條時 rootElement.clientWidth === window.innerWidth // true ``` 對于`<i>`、`<code>`和`<span>`這些內聯元素，clientWidth和clientHeight總是0 **（2）clientLeft、clientTop** `clientLeft` 屬性等于元素節點左邊框（left border）的寬度， `clientTop `屬性等于網頁元素頂部邊框的寬度，單位為像素。但是如果元素有滾動條，并且瀏覽器將這些滾動條放置在左側或頂部（極少見），這兩個屬性就包括了滾動條的寬度，但不包括Margin和Padding。如果元素是內聯元素，clientLeft和clientTop屬性總是為0。 **（3）scrollWidth、scrollHeight** ` scrollHeight `屬性返回某個網頁元素的總高度， `scrollWidth` 屬性返回總寬度，也就是元素的內容加上它的內邊距再加上任何溢出內容的尺寸。這兩個屬性是只讀屬性。它們返回的是整個元素的高度或寬度，包括由于存在滾動條而不可見的部分。默認情況下，它們包括Padding，但不包括Border和Margin。 **（4）scrollLeft、scrollTop** ` scrollLeft `屬性表示網頁元素的水平滾動條向右側滾動的像素數量， `scrollTop` 屬性表示網頁元素的垂直滾動條向下滾動的像素數量。對于那些沒有滾動條的網頁元素，這兩個屬性總是等于0。如果要查看整張網頁的水平的和垂直的滾動距離，要從document.body元素上讀取。 ``` document.body.scrollLeft document.body.scrollTop ``` 這兩個屬性都可讀寫，設置該屬性的值，會導致瀏覽器將指定元素自動滾動到相應的位置。 **（5）offsetWidth、offsetHeight** ` offsetHeight` 屬性返回元素的垂直高度，` offsetWidth` 屬性返回水平寬度。這兩個屬性值包括Padding和Border、以及滾動條，也就是說從邊框的左上角開始計算，這也意味著，offsetHeight只比clientHeight少了邊框的高度。它們的單位為像素，都是只讀。整張網頁的高度，可以在document.documentElement和document.body上讀取。 ``` // 網頁總高度 document.documentElement.offsetHeight document.body.offsetHeight // 網頁總寬度 document.documentElement.offsetWidth document.body.offsetWidth ``` **（6）offsetLeft、offsetTop** offsetLeft 返回當前元素左上角相對于 offsetParent節點的垂直偏移， offsetTop 返回水平位移，單位為像素。通常，這兩個值是指相對于父節點的位移。 **1.8 其他文檔特性** **1.8.1 Document** **Document屬性** **（1）document.cookie** 用來操作瀏覽器Cookie **（2）domain** 返回當前文檔的域名 **（3）lastModified** 包含文檔修改時間的字符串 **（4）location** 與window對象的location屬性引用同一個location對象 **（5）referrer** document.referrer屬性返回一個字符串，表示當前文檔的訪問來源，如果是無法獲取來源或是用戶直接鍵入網址，而不是從其他網頁點擊，則返回一個空字符串。注：HTTPS默認會關閉referrer，需要通過meta來設置，設置方法如下： ``` <meta name="referrer" content="always"> ``` **（6）title** 文檔的`<title>`和`</title>`標簽之間的內容，可讀寫。 **（7）URL** 文檔的URL。只讀字符串而不是location對象。該屬性值與location.href的初始值相同。 **（8）doctype** document對象一般有兩個子節點。第一個子節點是document.doctype，它是一個對象，包含了當前文檔類型（Document Type Declaration，簡寫DTD）信息。對于HTML5文檔，該節點就代表<!DOCTYPE html>。如果網頁沒有聲明DTD，該屬性返回null。 **（9）documentElement** `document.documentElement`屬性返回當前文檔的根節點（root）。它通常是document節點的第二個子節點，緊跟在document.doctype節點后面。 **（10）defaultView** `document.defaultView`屬性，在瀏覽器中返回document對象所在的window對象，否則返回null。 ``` document.defaultView === window // true ``` **（11）activeElement** document.activeElement屬性返回當前文檔中獲得焦點的那個元素。用戶通常可以使用Tab鍵移動焦點，使用空格鍵激活焦點。比如，如果焦點在一個鏈接上，此時按一下空格鍵，就會跳轉到該鏈接。 **（12）characterSet** document.characterSet屬性返回渲染當前文檔的字符集，比如UTF-8、ISO-8859-1。 **（13）readyState** document.readyState屬性返回當前文檔的狀態，共有三種可能的值。 loading：加載HTML代碼階段（尚未完成解析） interactive：加載外部資源階段時 complete：加載完成時 **（14）compatMode** compatMode屬性返回瀏覽器處理文檔的模式，可能的值為BackCompat（向后兼容模式）和CSS1Compat（嚴格模式）。一般來說，如果網頁代碼的第一行設置了明確的DOCTYPE（比如`<!doctype html>`），document.compatMode的值都為CSS1Compat。 **Document方法** **（1）document.write()、document.writeIn()** document.write()方法會將其字符串參數連接起來，然后將結果字符串插入到文檔中調用它的腳本元素的位置。當腳本執行結束，瀏覽器解析生成的輸出并顯示它。 document.writeIn()，類似document.write()，只是在其參數的輸出之后追加一個換行符。 **1.8.2 查詢選取的文本** 標準的window.getSelection()方法返回一個Selection對象，后者描述了當前選取的一系列一個或多個Range對象。 **1.8.3 可編輯的內容** 我們可以設置任何標簽的HTML contenteditable屬性或者用JavaScript設置對應元素的contenteditable屬性，使得元素的內容變成可編輯。 ``` <div contenteditable="true"></div> ``` 當你讓標簽的內容變成可編輯時，有些瀏覽器會默認開啟檢查，如果你不需要時，可以這樣設置： ``` <div contenteditable="true" spellcheck="false"></div> ``` 在當今的一些富文本編輯中，常常使用iframe來當文本框，只需將Document對象的designMode屬性設置為字符串“on”就可使得整個文檔可編輯（“off”將恢復只讀文檔）。 ``` <iframe id="editor"></iframe> var editor = document.getElementById('editor'); editor.contentDocument.designMode = 'on'; ``` 由于designMode屬性并沒有對應的HTML屬性，所以要使用contentDocument屬性。 **1.8.4 execCommand()方法** Document對象的execCommand()方法可以讓我們很方便的插入元素或者改變樣式。 ``` document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) ``` 參數 aCommandName：一個 DOMString ，命令的名稱。 aShowDefaultUI：一個 Boolean 是否展示用戶界面，一般為 false。Mozilla 沒有實現。 aValueArgument：一些命令需要一些額外的參數值（如insertimage需要提供這個image的url）。默認為null。 document.queryCommandSupport() 傳遞命令來查詢瀏覽器是否支持該命令 document.queryCommandEnabled() 查詢當前使用的命令 document.queryCommandState() 判斷命令當前的狀態。 document.queryCommandValue() 查詢該值。 document.queryCommandIndeterm()