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