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