腳本化文檔

時間 2019-12-09

標籤腳本文檔简体版

原文原文鏈接

每一個Window對象有一個document屬性引用了Document對象。Document對象表示窗口的內容。它並不是獨立的，它是一個巨大的API中的核心對象，叫作文檔對象模式DOM，它表明和操做文檔的內容。javascript

文檔對象模式DOM是表示和操做HTML和XML文檔內容的基礎API.HTML文檔的樹狀結構包含表示HTML標籤或元素（如《body》<p>）和表示文本字符串的節點，它也可能包含表示HTML註釋的節點php

每一個方框是文檔的一個節點，它表示一個Node對象。咱們將在後續幾節中討論node的屬性和方法，它包含3種不一樣類型的節點，樹形的根部是Document節點，它表明整個文檔。表明html元素的節點是Element節點，表明文本的節點是Text節點。Document、Element和Text是Node的子類css

注意，通用的Document和Element類型與HTMLDocment和HTMLElement類型之間是有嚴格的區別的。Docment類型表明一個HTML或XML文檔，Element類型表明該文檔中的一個元素。HTMLDocument和HTMLElement子類只是針對HTML文檔和元素。html

爲了操做文檔中的元素，必須經過某種方式得到或選取這些引用文檔元素的Element對象。DOM定義許多方式來選取元素。查詢文檔的一個或個多個元素有以下方法：html5

用指定的id屬性java

用指定的name屬性node

用指定的標籤名字jquery

用指定的CSScss3

匹配指定的CSS選擇器web

多個元素可能有一樣的名字，在表單中，單選和複選按鈕一般是這種狀況，並且，和id不同的是name屬性只在少數html元素中有效，包括表單，表單元素、《iframe》和《img》元素

geiElementByName定義在HTMLDocument類中，而不在Document類中，因此它只針對HTML文檔可用，在XML文檔中不可用，它返回一個NodeList對象，後者的行爲相似一個包含若干Element對象的只讀數組。在IE中，getElementByName也返回id屬性匹配指定值的元素。爲了兼容，應該當心謹慎，不要將一樣的字符串同時用做名字和ID。

爲某些HTML元素設置name屬性將自動爲Window對象中建立對應的屬性，對Document對象也相似。爲form、img iframe applet embed object設置name屬性值，即在Document對象中建立以此name屬性值爲名字的屬性（固然假設文檔尚未該名字的屬性），若是給定的名字只有一個元素，自動建立的文檔屬性對應的該值是元素自己。若是有多個元素，該文檔屬性的值是一個NodeList對象，它表現爲一個包含這些元素的數組。爲若干命名爲《iframe》元素所建立的文檔屬性比較特殊：它們指代這些框架的Window對象而不是Element對象

這就意味着有些元素能夠做爲D哦促門徒屬性僅經過名字來選取

<form name="shipping_address" >元素，獲得Element對象

var form=document.shipping_address,

因此不要用爲窗口對象自動建立的屬性，這一樣適用於爲文檔對象自動建立的屬性。若是須要查找命名的元素，最好顯示的調用getElemengtsByName來查找它們

相似於getElementsByName,getElementsByTagName()返回一個NodeList對象。在NodeList中返回的元素按照在文檔中的順序排序的

var firstpara=document.getElementsByTagName("p")[0];

HTML標籤是不區分大小寫的，給getElementsByTagName傳遞通配參數「*」將得到一個表明文檔中全部元素的NodeList對象

Element類也定義getElementsByTagName方法，其原理和Document版本同樣，可是它只選取該方法的元素的後代元素

因爲歷史的緣由，HTMLDocument類定義一些快捷屬性來訪問各類各樣的節點。例如images forms和links等屬性指向行爲相似只讀數組的<img>,<form> <a>(但只包含那些與href屬性的<a>標籤)元素集合。這些屬性指代HTMLCollection對象，它們很像NodeList對象，可是除此以外它們能夠用元素的ID或者名字來索引。早些時候，咱們已經看到用以下的表達式來引用一個命名的<form>元素：

document.shipping_address

用document.forms屬性也能夠更具體的引用命名（或有ID的）表單，以下：

document.forms.shipping_address

HTMLDoument也定義embeds和plugins屬性，它們是同義詞，都是HTMLCollection類型的</embed>元素的集合。anchors是非標準屬性，它指代有一個name屬性的<a>元素而不是一個href屬性

HTMLDocument對象還定義兩個屬性，它們指代特殊的單個元素而不是元素的集合。

document.body是一個html文檔的《body》元素，document.head是《head》元素。這些屬性老是會定義：若是文檔源代碼未顯示的包含《head》和《body》元素，瀏覽器將隱式地建立它們。Document類的documentElement屬性指代文檔的根元素。在HTML文檔中，它老是指代《html》元素

getElementsByName和getElementsByTagName都返回NodeList對象，而相似document.images和document.forms的屬性爲HTMLCollection對象

這些對象都是隻讀的類數組對象，它們有length屬性，也能夠像真正的數組同樣索引（只是讀而不寫）

for(var i=0;i<document.images.length;i++){

document.images[i].style.display="none";

}

不能直接在NodeList和HTML集合上調用Array的方法，但能夠間接調用：

var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML};);

HTMLCollection對象也有額外的命名屬性，也能夠經過數字和字符串來索引。

一般，它們的實時性很是有用，可是，若是要在迭代一個NodeList對象時在文檔中添加或者刪除的元素，首先會須要對NodeList對象生成一個靜態的副本

var snapshot=Array.prototype.slice.call(nodelist,0);

相似getElementsByTagName,在HTML文檔和HTML元素上均可以調用getElementsByClassName，它的返回值是一個實時的NodeList對象，包含文檔或元素全部匹配的後代節點。它只須要一個字符串參數，可是該字符串能夠由多個空格隔開的標識符組成。只有當元素的class屬性值包含全部指定的標識符時才匹配，可是標識符的順序是可有可無的

除了IE8及其比較低的版本，getElementsByClassName在全部當前的瀏覽器中都實現了，IE8確實支持querySelectorAll（）方法，能夠在其上實現的

Document方法querySelectorAll。它接受包含一個css選擇器的字符串參數，返回一個表示文檔中匹配選擇器的全部元素的NodeList對象。與前面描述的選取元素的方法不一樣，它返回的NodeList對象並非實時的：它包含在調用時刻選擇器所匹配的元素，但它並不更新後續文檔的變化。若是沒有匹配的元素，querySlectorAll將返回一個空的NodeList對象，若是選擇器字符串非法，querySelectorAll將拋出一個異常

querySelector只是返回第一匹配的元素（以文檔順序）或者若是沒有匹配的元素就返回null

這兩個方法在Element節點中也有定義（而且也在DocumentFragme節點中）。在元素上調用時，指定的選擇器仍然在整個文檔中進行匹配，而後過濾出結果集以便它只包含指定元素的後代元素。這看起來是違反常規的，由於它意味着選擇器字符串包含元素的祖先而不只僅是上述所匹配的元素

全部當前的瀏覽器都支持querySelectorAll和querySelctor方法，可是注意，這些方法的規範並不要求支持css3選擇器：鼓勵瀏覽器支持和在樣式表中同樣的選擇器集合，當前的瀏覽器除了ie都支持css3選擇器。ie7和8都支持css2選擇器

querySlectorAll是終極的選取元素的方法。經過它客戶端javascript程序可以選擇它們想要操做的元素，jquery庫使用這種基於css選擇器的查詢做爲它的核心編程方式，基於jquery的web應用程序使用一個輕便的，跨瀏覽器的、和querySelectorAll等效的方法，命名爲$().

Document對象，它的Element對象和文檔中表示文本的Text對象都是Node對象。

它們有如下重要的屬性：

parentNode

該節點的父節點，或者針對相似Document對象應該是null，由於它沒有父節點

childNodes

只讀的類數組對象（NodeList對象），它是該節點的字節點的實時表示。

firstChild、lastChild

該節點的字節點中的第一個和最後一個，若是該節點沒有子節點則爲null

nextSibling previoursSibling

該節點的兄弟節點中的前一個和下一個。具備相同父節點的兩個節點爲兄弟節點

nodeType

該節點的類型。9表明Document節點、1表明Element節點，3表明Text節點，8表明comment節點，11表明DocumentFragment節點

nodeValue

Text節點或comment節點的文本內容

nodeName

元素的標籤名，以大寫形式表示。

注意該API對文檔文本的變化及其敏感

做爲元素樹的文檔

當將主要的興趣點集中在文檔中的元素上而不是它們之間的文本（和它們之間的空白）上時，咱們可使用另一個更有用的API.它將文檔看作是Element對象樹，忽略部分文本「Text」和Comment節點。

Element對象的children屬性，相似childNodes，它也是一個NodeList對象，可是不一樣的是chlidren列表只包含Element對象。children並不是標準屬性，可是它在全部當前的瀏覽器中都能工做

注意，Text和comment節點沒有children屬性，它意味着上述node.parentNode屬性不可能返回Text或Comment節點。任何Element的parentNode老是另外一個Element，或者追溯到樹根的Document或DocumentFragment節點

firstElementChild和lastElementChild

相似firstChild和lastChild，但只表明子Element

nestElementSibling，previousElementSibling

相似nextSibling和previousSibling,但只表明兄弟Element

childElementCount

子元素的數量。返回的值和children.length值相等。

子元素和兄弟元素的屬性是標準屬性，並在除了IE以外的瀏覽器中都已實現。

屬性

HTML元素由一個標籤和一組稱爲屬性的名/值對組成，html元素的屬性值在表明這些元素的HTMLElement對象的屬性中是可用的，DOM還定義了另外的API來獲取或設置XML屬性值和非標準的HTML屬性。

表示HTML文檔元素的HTMLElement對象定義了讀寫屬性，它們映射了元素的HTML屬性。HTMLElement定義了通用的HTTP屬性（id，標題lang和dir）的屬性，以及事件處理程序屬性（如onclick）。特定的Element子類型爲其元素定義了特定的屬性。例如，查詢一張圖片的url，可使用表示《img》元素的HTMLElement對象的src屬性

var image=document.getElementById(「myimage」);

var imgurl=image.src;

img.id==="myimage"；

一樣的，能夠爲一個form元素設置表單提交的屬性

var f=document.forms[0];

f.action="http://www.example.com/submit.php";

f.method="post";

HTML屬性名不區分大小寫，但javascript屬性名則大小寫敏感。從HTML屬性名轉換到javascript屬性名應該採用小寫。可是，若是屬性名包含不止一個單詞，則將除了第一個單詞之外的單詞的首字母大寫，例如：defaultChenked和tabIndex。

有些HTML屬性名在JavaScipt中是保留字，對於這些屬性，通常的規則是爲屬性名加前綴html，例如HTML的for屬性（label元素）在javascipt中變爲htmlForm屬性，class在javascript中是保留字，它是html很是重要的class屬性，是上面規則的一個例外：在javaScript代碼中它變爲className

表示HTML屬性的值一般是字符串。當屬性爲布爾值或數值（例如，input元素的defaultChecked和maxLength屬性），屬性也是布爾值或數值，而不是字符串，時間處理程序屬性值老是Function對象（或null）。html5規範定義了一個新的屬性（如input和相關元素的form屬性）用以將元素ID轉換爲實際的E了門廳對象，最後，任何HTML元素的style屬性值是CSSStyleDeclaration對象，而不是字符串

HTMLElement和其子類型定義了一些屬性，它們對應於元素的標準HTML屬性。Element類型還定義了getAttribute（）和setAttribute方法來查詢和設置非標準的HTML屬性，也可用來查詢和設置XML文檔中元素上的屬性。

這兩個方法和前面的基於屬性的api之間兩個重要的區別。首先，屬性值都被看作是字符串，getAttribute不返回數值，布爾值或對象。其次，方法使用標準屬性名，甚至當這些名詞爲javascript保留字時也不例外。對HTML元素來講，屬性名不區分大小寫

element類型還定義了兩個相關的方法，hasAttribute和removeAttribute，它們用來檢測命名屬性是否存在和徹底刪除屬性。

當屬性爲布爾值時這些方法特別有用：有些屬性（如html的表單元素的disabled屬性）在一個元素中是否存在是重點關鍵，而其值卻可有可無

數據集屬性

在html5文檔中，任意以「data-」爲前綴的小寫的屬性名字都是合法的。這些數據集屬性將不會對其元素的表現產生影響，它們定義了一種標準的，附加額外數據的方法，並非在文檔合法性上作出讓步。

html5還在element對象上定義了dataset屬性。該屬性指代一個對象，它的各個屬性對應於去掉前綴的data-屬性。所以dataset.x應該保存data-x的值。代連字符的屬性對應於駝峯命名法屬性名：data-jquery-test屬性就變成了dataset.jqueryTest屬性，

注意，dataset屬性是（或將是，當實現之後）元素的data-屬性的實時、雙向接口。設置或刪除dataset的一個屬性就等於設置或移除對應元素的data-屬性。

做爲attr節點的屬性

還有一種使用Element的屬性的方法。Node類型定義了attributes屬性。針對非Element對象的任何節點，該屬性爲null。對於Element對象，attributes屬性是隻讀的類數組對象，它表明元素的全部屬性。相似NodeLists，attributes對象也是實時的，它能夠用數字索引訪問，這意味這能夠枚舉元素的全部屬性。而且，它也能夠用屬性名索引

document.body.attributes[0]

document.body.attributes.bgcolor

document.body.attributes["ONLOAD"]

當索引attributes對象時獲得的值是Attr對象，attr對象一類特殊的Node，但歷來不會像Node同樣去用。Attr的name和value屬性返回該屬性的名字和值

做爲HTML的元素內容

讀取element的innerHTML屬性做爲字符串標記返回那個元素的內容，在元素上設置該屬性調用了web瀏覽器的解析器，用新字符串內容的解析展示形式替換元素當前內容

web瀏覽器很擅長解析HTML，同時設置innerHTML效率很是高，甚至在指定的值須要解析時效率也是至關不錯，但注意，對innerHTML屬性用「+=」操做符重複追加一小段文本一般效率低下，由於它既要序列化又要解析

html5還標準化了outerHTML屬性。當查詢outerHTML時，返回的HTML或XML標記的字符串包含被查詢元素的開頭和結尾標籤。當設置元素的outerHTML時，元素自己被新的內容所替換，只有element節點定義了outerHTML屬性，Document節點無

outerHTML在出了firefox的全部當前瀏覽器中都支持。

ie引入的另外一個特性是inertAdjacentHTML方法，它將在html5中標準化，它將任意的後頭抹了標記字符串插入到指定的元素相鄰的位置。標記是該方法的第二個參數，而且相鄰的精確含義依賴第一個參數的值。第一個參數爲具備如下值之一的字符串：

beforebegin，afterbegin、beforeend，afterend，insertAdjacentHTML在當前版本的firefox中不支持

做爲純文本的元素內容

有時須要查詢純文本形式的元素內容，或者在文檔中插入純文本（沒必要轉義HTML標記中使用的尖括號和&符號）。標準的方法是Node的textContent屬性來實現

var para=document.getElementsByTagName("p")[0];

var text=para.textContent;

para.textContent="hello world";

textContent屬性在除了IE的全部當前的瀏覽器中都支持。在IE中，能夠用Element的innetText屬性來代替。它除了firefox的全部當前瀏覽器中都支持

textContent和innetText屬性很是類似，一般能夠互換，不過要當心空元素（在javascript中字符串「」是假值）和未定義的屬性之間的區別

textContent屬性就是將指定元素的全部後代Text節點簡單的串聯在一塊兒。innerText沒有一個明確指定的行爲，可是和textContent有一些不一樣。innerText不返回script元素的內容。它忽略多餘的空白，並試圖保留表格格式。同時innerText針對某些表格元素（如table tbody tr）是隻讀的屬性。

做爲Text節點的元素內容

另外一種方法處理元素的內容來是看成一個子節點列表，每一個字節點可能有它本身的一組子節點。當考慮元素的內容時，一般感興趣的是它的Text節點，在XML文檔中，你也必須準備好處理CDATASection節點-它是Text的子類型，表明了CDATA段的內容

nodeValue屬性能夠讀和寫，設置它能夠改變Text或CDATASection節點所顯示的內容。

Text和CDATASection都是CharacterData的子類型，能夠在第四部分查看相關信息。CharacterData定義了data屬性，它和nodeValue的文本相同。

咱們已經看到用HTML和純文本字符串如何來查詢和修改文檔內容，也已經看到咱們可以遍歷Document來檢查組成Doumnent的每一個Element和Text節點。在每一個節點級別修改文檔也是有可能的。Document類型定義了建立Element和Text對象的方法，Node類型定義了在節點中插入、刪除和替換的方法。

function loadasync(url){

var head=document.getElementsByTagName("head")[0];

var s=document.createElement("script");

s.src=url;

head.appendChild(s);

}

建立節點

建立新的Element節點可使用Document對象的createElement方法，給方法傳遞元素的標籤名：對HTML文檔來講該名字不區分大小寫，對XML文檔則須要區分大小寫

Text節點用相似的方法建立：

var newnode=document.createTextNode("text node content");

另外一種建立新文檔節點的方法是複製已存在的節點。每一個節點有一個cloneNode方法來返回該節點的一個全新副本。給方法傳遞

參數true也可以遞歸的複製全部的後代節點，或傳遞參數false只執行一個淺複製。在除了IE的其餘瀏覽器中，Document對象還定義了一個相似的方法叫作importNode。若是給它傳遞另外一個文檔的一個節點，它將返回一個適合本文檔插入的節點的副本，傳遞true做爲第二個參數，該方法將遞歸地導入全部的後代節點。

插入新節點

一旦有了一個新節點，就能夠用Node的方法appendChild或insertBefore將它插入到文檔中。appendChild是izai須要插入的Element節點上調用的，它插入指定的節點使其成爲那個節點的最後一個子節點。

insertBefore就像appendChild同樣，除了它接受兩個參數。第一個參數就是待插入的節點，第二個參數是已存在的節點，新節點將插入該節點的前面。該方法應該是在新節點的父節點上調用，方法的第二個參數必須是該父節點的子節點。若是傳遞null做爲第二個參數，insertBefore的行爲相似appendChild，它將節點插入在最後

function insetAt(parent,child,n){

if(n<0||n>parent.childNodes.length) throw new Error("invalid index");

else if(n==parent.childNodes.length) parent.appendChild(child);

else parent.insertBefore(child,parent.childNodes[n]);

}

若是調用appendChlid或者insertBefore將已存在文檔中的一個節點再次插入，那個節點將自動從它當前的位置刪除並在新的位置從新插入：沒有必要顯示的刪除該節點

刪除和替換節點

removeChild（）方法是從文檔樹中刪除一個節點。可是請當心：該方法不是在待刪除的節點上調用，而是在其父節點上調用，在父節點上調用該方法，並將須要刪除的字節點做爲方法參數傳遞給它

n.parentNode.removeChild(n);

replaceChild方法刪除一個子節點並用一個新的節點取而代之。在父節點上調用該方法，第一個參數是新節點，第二個參數是須要代替的節點

n.parentNode.replaceChild(document.createTextNode("[redacted]"),n);

DocumentFragment是一種特殊的Node，它做爲其餘節點的一個臨時的容器，像這樣建立一個DocumentFragment：

var frag=document.createDocumentFragment();

像Document節點同樣，DocumentFragment是獨立的，而不是任何其餘文檔的一部分。它的parentNode老是爲null，但相似Element，它能夠有任意多的子節點，能夠用appendChild、insertBefore等方法來操做它們。

DucumentFragment的特殊之處在於它使得一組節點被看成一個節點看待：若是給appendChild、insertBefore或replaceChild傳遞一個DocumentFragment，其實將該文檔片斷的全部字節點插入到文檔中，而非片斷自己。（文檔那個片斷的子節點從片斷移動到文檔中，文檔片斷清空以便重用）

元素座標和視口座標

元素的位置是以像素來度量的，向右表明X座標的增長，向下表明Y座標的增長。可是，有兩個不一樣的點做爲座標系的原點：元素的x和y座標能夠相對於文檔的左上角或相對於顯示文檔的視口的左上角。在頂級窗口和標籤頁中，視口只是實際顯示文檔內容的瀏覽器的一部分：它不包括瀏覽器外殼（如菜單、工具條和標籤頁）。針對框架頁面中顯示的文檔，視口是定義了框架頁的iframe元素，不管在任何中狀況下，當討論元素的位置時，必須弄清楚所使用的座標是文檔座標仍是視口座標，視口座標有時也叫作窗口座標。

若是文檔比視口要小，或者說它還未出現滾動，則文檔的左上角就是視口的左上角，通常來講，文檔和視口座標系統是同一個。可是，通常來講，要在兩種座標系之間互相轉換，必須加上或減去滾動的偏移量（scroll offset）。例如，在文檔座標中若是一個元素的Y座標是200像素，而且用戶已經把瀏覽器向下滾動75像素，那麼視口座標元素的Y座標是125像素。一樣，在視口座標中若是一個元素的x座標是400，而且用戶已經水平滾動了視口200像素，那麼文檔座標中元素的x座標是600像素。

文檔座標比視口座標更加基礎，而且在用戶滾動時它們不會發生變化。不過，在客戶端編程中使用視口座標是很是常見的。當使用css指定元素的位置時運用了文檔座標，可是最簡單的查詢元素位置的方法返回視口座標中的位置。相似地，當爲鼠標事件註冊事件處理程序函數時，報告的鼠標指針的座標是在視口座標系中的。

爲了在座標系之間互相轉換，咱們須要判斷瀏覽器窗口的滾動條的位置。window對象的pageXOffset和pageYOffset屬性在全部的瀏覽器中提供這些值，除了IE8及更早的版本覺得。Ie也能夠經過scrollLeft和scrollTop屬性來得到滾動條的位置。使人迷惑的是，正常狀況下經過查詢文檔的根節點（document.documentElement）來獲取這些屬性值。但在怪異模式下，必須文檔的《body》元素document。body上查詢它們

function getScrollOffsets(w){

w=w||window;

if(w.pageXOffset!=null)return {x:w.pageXOffset,y:w.pageYOffset};

var d=w.document;

if(document.compatMode=="CSS1Compat"){

return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};

}

return {x:d.body.scrollLeft,y:d.body.scrollTop};

}

查詢元素的幾何尺寸

斷定一個元素的尺寸和位置最簡單的辦法是調用它的getBoundingClientRect方法。它不須要參數，返回一個有left、right、top、和buttom屬性的對象。left對象和top屬性表示元素左上角的x和Y座標，right和bottom屬性表示元素的右下角的X和Y座標

這個方法返回元素在視口座標中的位置。爲了轉化爲甚至用戶滾動瀏覽器窗口之後仍然有效的文檔座標，須要加上滾動的便宜量

var box=e.getBoundingClientRect();

var offsets=getScrollOffsets();

var x=box.left+offsets.x;

var y=box.top+offsets.y;

在不少瀏覽器（和w3c）中，getBoundingClientRect返回的對象還包含width和height屬性，可是在原始的IE中未實現。爲了簡便起見，能夠這樣計算元素的width和height

var box=e.getBoundingClientRect();

var w=box.width||(box.right-box.left);

var h=box.heith||(box.bottom-box.top);

元素內容被一塊可選的空白區域所包圍，叫作內邊距，內邊距被邊框所包圍，邊框被外邊距所包圍。內邊距、邊框和外邊距都是可選的。getBoundingClientRect所返回的座標包含元素的邊框和內邊距，但不包含元素的外邊距。

如getElementsByTagName這樣的dom方法返回的結果是實時的，當文檔變化時這些結果能自動更新，但getBoundingClientRect和getClientRects所返回的矩形對象和矩形對象列表並非實時的。它們只是調用方法時文檔視覺狀態的靜態快照，在用戶滾動或改變瀏覽器窗口大小時不會更新它們。

滾動

Window對象的scrollTo（和其同義詞scroll）方法接受一個點的X和Y座標（文檔座標），並做爲滾動條的偏移量設置它們。也就是，窗口滾動到指定的點出如今視口的左上角。若是指定的點太接近文檔的下邊緣或右邊緣，瀏覽器將盡可能保證它和視口的左上角之間最近。但沒法達到一致

window的scrollBy()和scroll和scrollTo相似，可是它的參數是相對的，並在當前滾動條的偏移量上增長

javascript：void setInterval（function （）{scrollBy(0,10)},200）；

一般，除了滾動到文檔中用數字表示的位置，咱們只是想它滾動使得文檔中的某個元素可見。能夠利用getBoundingClientRect計算元素的位置，並轉換爲文檔座標，而後用scrollTo方法達到目的。可是在須要顯示的HTML元素上調用scrollIntoView方法更加方便。該方法保證了元素咋視口中可見。默認狀況下，它試圖將元素的上邊緣放在或儘可能接近視口的上邊緣。若是隻傳遞false做爲參數，它將試圖將元素的下邊緣放在或儘可能接近時時候。只要有助於元素在視口內可見。瀏覽器也會水平滾動窗口。

任何HTML元素的只讀屬性offsetWidth和offsetHeight以css像素返回它的屏幕尺寸。返回的尺寸包含元素的邊框和內邊距

，除去了外邊距。

全部HTML元素擁有offsetLeft和offsetTop屬性來返回元素的x座標和y座標。對於不少元素，這些值是文檔座標，並直接指定元素的位置。但對於已定義元素的後代元素和一些其餘元素（如表格單元），這些屬性返回的座標是相對於祖先元素的而不是文檔。offsetParent屬性指定這些屬性所相對的父元素。若是offsetParent爲null，這些屬性都是文檔座標

除了這些名字以offset開頭的屬性之外，全部的文檔元素定義了其餘兩組屬性，其名稱一組以client開頭，另外一組以scroll開頭。即，每一個HTML元素都有一些這些屬性；

爲了理解這些client和scroll屬性，你須要知道HTML元素的實際內容有可能比分配用來容納內容的盒子更大，所以單個元素可能有滾動條。內容區域是視口，就像瀏覽器的窗口，當實際比視口更大時，須要把元素的滾動條位置考慮進去。

clientWidth和clientHeight相似offsetWidth和offsetHeight，不一樣的是它們不包含邊框大小，只包含內容和它的內邊距。同時，若是瀏覽器咋內邊距和邊框之間添加了滾動條，clientWidth和clientHeight在其返回值中也不包含滾動條。注意對於相似i code span這些內聯元素，clientWidth和clientHeight老是返回0.有一個特殊的案例，在文檔的根元素上查詢這些屬性時，它們的返回值和窗口的innerWidth和innerHeight屬性值相等

clientLft和clientTop屬性沒什麼做用，一般這些值就等於左邊和上邊的邊框寬度。對於內聯元素，它們老是爲0.

scrollWidth和scollHeight是元素的內容區域加上它內邊距再加上任何溢出內容的尺寸。當內容正好和內容區域匹配而沒有溢出時，這些屬性和clientWidth和cliengHeight是相等的。但當溢出時，它們就包含溢出的內容，返回值比clientWidth和clientHeight要大

最後，scrollLeft和scrollTop指定元素的滾動條的位置。注意，scrollLeft和scrollTop是可寫的屬性，經過設置它們來讓元素中的內容滾動。（HTML元素並無相似Window對象的scrollTo方法）

document.forms是一個HTMLColllection對象，能夠經過數字序號或id或name來選取表單元素。Form對象自己的行爲相似多個表單元素組成的HTMLCollectiion集合，如今也能夠經過name或數字序號來索引。若是名爲address的表單的第一個元素的name是street，可使用如下任何一種表達式

document.forms.address[0]

document.forms.address.street

document.address.street//當有name=「address」,而不是隻有id=「address」

若是要明確的選取一個表單元素，能夠索引表單對象的elements屬性：

document.forms.address.elements[0];

document.forms.address.elements.street

name屬性在HTML表單提交中有特殊的目的，它在表單中較爲經常使用，在其餘元素中較少使用。它應用於相關的複選按鈕組和強制共享name屬性值的，互斥的單選按鈕組，請記住，當用name來索引一個HTMLCollection對象而且它包含多個元素共享name時，返回值是一個類數組對象，它包含全部匹配的元素。

elements數組是form對象中最有趣的屬性，action encoding method和target屬性（property）直接對應於form元素的action、encoding、method和target等html屬性（attribute），這些屬性都控制了表單是如何來提交數據到web服務器並如何顯示的

在javascript產生以前，要用一個專門的提交按鈕來提交表單，用一個專門的重置按鈕來重置各表單元素的值，javascript的form對象支持兩個方法submit和reset方法，它們完成一樣的目的，調用form對象的submit方法來提交表單，調用reset方法來重置表單元素的值。

全部（多數）表單元素一般都有如下屬性

type

標識表單元素類型的只讀的字符串，針對用input標籤訂義的表單元素而言，就是其type屬性的值，其餘表單元素（如textarea和select）定義type屬性是爲了輕鬆的標識它們，與input元素在類型檢測時互相區別

form對包含元素的form對象的只讀引用，或者若是元素沒有包含在一個form元素中，則其值爲null

name

只讀的字符串，有html屬性name指定

value

可讀/寫的字符串，指定了表單元素包含或表明的值。它就是當提交表單時發送到web服務器的字符串。也是javascript程序有時候會感興趣的內容。針對text和textarea元素，該屬性值包含了用戶輸入的文本。針對用input標籤建立的按鈕元素（除了用button標籤建立的按鈕），該屬性值指定了按鈕顯示的文本。可是，針對單選和複選按鈕元素，該屬性用戶不可見也不能編輯。它僅是用HTML的value屬性來設置的一個字符串。它在表單提交是使用，但在關聯表單元素的額外數據時也頗有用。

表單和元素的事件處理程序

每一個Form元素都一個onsubmit事件處理程序來偵測表單提交，還有一個onreset事件處理程序來偵測表單重置。表單提交前調用onsubmit程序，它經過返回false可以取消提交動做。這給javascipt程序一個機會來檢查用戶的輸入錯誤，目的是爲了不不完整或無效的數據經過網絡提交到服務端程序。注意，onsubmit事件處理程序只能經過單擊提交按鈕來觸發。直接調用表單的submit方法不觸發onsubmit事件處理程序。

onreset事件處理程序和onsubmit是相似。它在表單重置以前調用，經過返回false可以阻止表單元素被重置

onreset只能經過單擊重置按鈕來觸發。直接調用表單的reset方法不會觸發onreset事件處理程序。

當用戶與表單元素交互時它們每每會觸發click或change事件。經過定義onclick或onchange事件處理程序能夠處理這些事件，通常來講，當按鈕表單元素激活時它們會觸發click事件。當用戶改變其餘表單元素所表明的值時它們會觸發change事件。當用戶在一個文本域輸入文本或從下拉列表中選擇了一個選項後就發生這樣的改變。注意，在一個文本域中該事件不是每次用戶輸入一個鍵值時都會觸發，它僅當用戶改變了元素的值而後將焦點移動到其餘元素上時纔會觸發。也就是說，調用該事件處理程序就意味着一個完整的改變。單選按鈕和複選按鈕都有一個狀態標識，它們的click和change事件都會觸發；兩個之中change事件更加有用。

表單元素在收到鍵盤的焦點時也會觸發focus事件，失去焦點時會觸發blur事件

在事件處理程序中關鍵字this是觸發該事件的文檔元素的一個引用。既然在form元素中的元素都有一個form屬性引用了該包含的表單，這些元素的事件處理程序老是可以經過this.form來獲得form對象的引用。更進一步，這意味這某個表單元素的事件處理程序可以經過this。form。x獲得該表單中以x命名的元素。

單選和複選框元素都定義了checked屬性。該屬性是可讀/寫的布爾值，它指定了元素當前是否選中。defaultChecked屬性也是布爾值，它是HTML屬性checked的值。它指定了元素在第一次加載頁面時是否選中

不一樣的文本輸入元素定義onkeypress、onkeydown和onkeyup事件處理程序。能夠從onkeypress和onkeydown事件處理程序返回false，防止記錄用戶的按鍵。這頗有用，例如，若是但願強制用戶在特定文本輸入域僅輸入數字。

若是select元素有multiple屬性，也就是select對象的type屬性值爲select-multiple，那麼就容許用戶選取多個選項。不然

沒有多選屬性，那隻能選取單個選項，它的type屬性值爲select-one

Select元素定了options屬性，它是一個包含了多個Option元素的類數組對象。

當用戶選取或取消選取一個選項時，select元素觸發onchange事件處理程序，針對「select-one」Select元素，它的可讀/寫屬性selectedIndex指定了哪一個選項當前被選中。針對select-multiple元素，單個selectedIndex屬性不足以表示被選中的一組選項，在這種狀況下，要斷定哪些選項被選中，就必須遍歷options[]數組的元素，並檢測每一個Option對象的selected屬性值，除了其select屬性，每一個option對象都有一個text屬性，它指定了select元素中的選項所顯示的純文本字符串。設置該屬性能夠改變顯示給用戶的文本。

經過設置options.length爲一個但願的值能夠截斷option元素數組，而設置options。length爲0能夠從select元素移除全部的選項。設置options[]數組中某點的值爲null能夠從Select元素中移除某個option對象。這將刪除該option對象，options[]數組中高端的元素自動移下來填補空缺

爲select元素增長一個新的選項，首先用Option（）構造函數建立一個Option對象，而後將其添加到options[]屬性中

這些專用的select元素的api已經很老了。能夠用那些標準的調用更明確的插入和移除選項元素：document.createElement(),node.inertBefore(),node.removeChild()等。

Ducument的屬性

容許javascript程序讀、寫http cookie特殊的屬性。

domain

該屬性容許當Web頁面之間交互時，相同域名下互相信任的web服務器之間協做放寬同源策略安全限制

lastModified

包含文檔修改時間的字符串

location

與window對象的location屬性引用同一個Location對象

referrer

若是有，它表示瀏覽器導航到當前連接的上一個文檔。該屬性值和http的referer頭信息的內容相同，只是拼寫上有兩個rr