腳本化文檔

DOM概覽

文檔對象模型是表示和操作HTML和XML文檔內(nèi)容的基礎(chǔ)API。

HTML文檔的樹狀表示.png

Document和Element是兩個重要的DOM類。

文檔結(jié)點(diǎn)的部分層次結(jié)構(gòu).png

commit節(jié)點(diǎn)代表HTML或XML的注釋。

選取文檔元素

為了操作文檔中的元素，必須通過某種方式獲得或選取這些引用文檔元素的Element對象。
查詢文檔的一個或多個元素的方法：

  1. 用指定的id屬性；
  2. 用指定的name屬性；
  3. 用指定的標(biāo)簽名字；
  4. 用指定的CSS類；
  5. 匹配指定的CSS選擇器。
通過ID選取元素

可以用Document對象的getElementByID()方法選取一個基于唯一id的元素。
<code>var section1 = dosument.getElementById("section1");</code>
如果需要通過ID查詢多個元素，那么getElements()函數(shù)非常有用。

通過名字選取元素

HTML的name屬性最初打算為表單元素分配名字，在表單數(shù)據(jù)提交到服務(wù)器時(shí)使用該屬性的值。
基于name屬性的值選取HTML元素，可以使用Document對象的getElementsByName()方法,返回一個NodeList對象。
<code>var radiobuttons = document.getElementsByName("favorite_color");</code>

通過標(biāo)簽名選取元素

Document對象的getElementsByTagName()方法可用來選取指定類型的所有HTML和XML元素,返回一個NodeList對象。
<code>var spans = document.getElementsByTagName("p");</code>
上述代碼在文檔中獲得包含所有<span>元素的只讀的類數(shù)組對象。
Document類的documentElement屬性指代文檔的根元素，在HTML文檔中，它總是指代<html>元素。

通過CSS類選取元素

HTML元素的class屬性值是一個以空格隔開的列表。
HTML定義了getElementByClassName()方法，它基于class屬性值中的標(biāo)識符來選取成組的文檔元素，它的返回值是一個NodeList對象，包含文檔或元素所有匹配的后代節(jié)點(diǎn)。

通過CSS選擇器選取元素

選擇器用來描述文檔中的若干或多組元素。

文檔結(jié)構(gòu)和遍歷

文檔從概念上可以看做是一顆節(jié)點(diǎn)對象樹。

作為節(jié)點(diǎn)樹的文檔

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

作為元素樹的文檔

將文檔看做是element對象樹。
子元素的數(shù)量，返回的值和children.length值相等。

屬性

HTML屬性作為Element的屬性

表示HTML文檔元素的HTMLElement對象定義了讀/寫屬性，他們映射了元素的HTML屬性。
特定的Element子類型為其元素定義了特定的屬性，例如查詢一張圖片的URL，可以使用表示img元素的HTMLElement對象的src屬性：
<code>
var image = document.getElementById("myimage");
var imgurl = image.src;
image.id === "myimage";
</code>
有些HTML屬性名在JavaScript中是保留字。對于這些屬性，一般的規(guī)則是為屬性名加前綴"html"。例如HTML的for屬性，在JS中變?yōu)閔tmlfor屬性。
而"class"在JS中變成"className"。

獲取和設(shè)置非標(biāo)準(zhǔn)的HTML屬性

Element類型定義了getAttribute()和setAttribute()方法來查詢和設(shè)置非標(biāo)準(zhǔn)的HTML屬性，也可以用來查詢和設(shè)置XML文檔中元素上的屬性。
<code>
var image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH"));
image.setAttribute("class","thumbnail");
</code>
hasAttribute()和removeAttribute()用來檢測命名屬性是否存在和完全刪除屬性。

數(shù)據(jù)集屬性

在HTML5文檔中，任意以“data-”為前綴的額小寫的屬性名字都是合法的。
HTML5在Element對象上定義了dataset屬性，該屬性指代一個對象，它的各個屬性對應(yīng)于去掉前綴的data-屬性。
<code>dataset.x =========== data-x
data-jquery-test =========== dataset.jqueryTest</code>

作為Attr節(jié)點(diǎn)的屬性

Node類型定義了Attributes屬性，針對非Element對象的任何節(jié)點(diǎn)，該屬性為null。
對于Element對象，Attributes屬性是只讀的類數(shù)組對象，它代表元素的所有屬性。
<code>document.body.attributes[0]
document.body.attributes.bgcolor</code>
當(dāng)索引Attributes對象時(shí)得到的是Attr對象，Attr的name和value屬性返回該屬性的名字和值。

元素的內(nèi)容

讀取Element的innerHTML屬性作為字符串標(biāo)記返回那個元素的內(nèi)容。

作為純文本的元素內(nèi)容

有時(shí)需要查詢純文本形式的元素內(nèi)容，或者在文檔中插入純文本，標(biāo)準(zhǔn)的方法就是用Node的textContent屬性來實(shí)現(xiàn)：
<code>
var para = document.getElementsByTagName("p")[0];
var text = para.textContent;
para.textContent = "Hello World!";
</code>
textContent屬性在除了IE瀏覽器中都支持，在IE中，可以用Element的innerText屬性來代替。
textContent屬性就是將指定元素的所有后代Text節(jié)點(diǎn)簡單地串聯(lián)在一起。
innerText沒有一個明確指定的行為，innerText不返回<script>元素的內(nèi)容。

作為Text節(jié)點(diǎn)的元素內(nèi)容

另一種方法處理元素的內(nèi)容是當(dāng)做一個子節(jié)點(diǎn)列表，每個子節(jié)點(diǎn)可能有它自己的一組子節(jié)點(diǎn)。當(dāng)考慮元素的內(nèi)容時(shí)，通常感興趣的是它的Text節(jié)點(diǎn)。

創(chuàng)建、插入和刪除節(jié)點(diǎn)

Document類型定義了創(chuàng)建Element和Text對象的方法，Node類型定義了在節(jié)點(diǎn)樹中插入、刪除和替換的方法。

創(chuàng)建節(jié)點(diǎn)
  • 創(chuàng)建新的Element節(jié)點(diǎn)可以使用Document對象的createElement()方法。給方法傳遞元素的標(biāo)簽名：
    <code>
    var newnode = document.createTextNode("text node content");
    </code>
  • 另一種創(chuàng)建新文檔節(jié)點(diǎn)的方法是復(fù)制已存在的節(jié)點(diǎn)，每一個節(jié)點(diǎn)有一個cloneNode()方法來返回該結(jié)點(diǎn)的一個全新副本。
    給方法傳遞參數(shù)true能夠遞歸的賦值所有的后代節(jié)點(diǎn)，傳遞false會進(jìn)行淺復(fù)制。
插入節(jié)點(diǎn)

appendChild()或insertBefore()可以將新的節(jié)點(diǎn)插入到文檔中。

  • appendChild()是在需要插入的Element節(jié)點(diǎn)上調(diào)用的，他插入指定的節(jié)點(diǎn)使其成為那個節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)。
  • insertBefore()是在新節(jié)點(diǎn)的父節(jié)點(diǎn)上調(diào)用，方法的第二個參數(shù)必須是該父節(jié)點(diǎn)的子節(jié)點(diǎn)，如果參數(shù)為null，則和appendChild()方法一樣，將節(jié)點(diǎn)插入在最后。

如果調(diào)用appendChild()和insertBefore()將已存在文檔中的一個節(jié)點(diǎn)在此插入，那個節(jié)點(diǎn)將自動從它當(dāng)前的位置刪除并在新的位置重新插入。

刪除和替換節(jié)點(diǎn)
  • removeChild()方法是從文檔樹中刪除一個節(jié)點(diǎn)。該方法是在待刪除節(jié)點(diǎn)的父節(jié)點(diǎn)上使用，并將需要刪除的子節(jié)點(diǎn)作為方法參數(shù)傳遞給它。
    例如，在文檔中刪除m節(jié)點(diǎn)，代碼為:
    <code>n.parentNode.removeChild(n);</code>
  • replaceChild()方法刪除一個子節(jié)點(diǎn)并用一個新的節(jié)點(diǎn)取代它。在父節(jié)點(diǎn)上調(diào)用它，第一個參數(shù)是新節(jié)點(diǎn)，第二個參數(shù)是需要代替的結(jié)點(diǎn)。
    例如，用一個文本字符串來替換節(jié)點(diǎn)n,代碼為:
    <code>n.parentNode.replaceChild(document.createTextNode("[REDACTED]"),n);</code>
使用DocumentFragment

DocumentFragment是一種特殊的Node，它作為其他節(jié)點(diǎn)的一個臨時(shí)容器。像這樣創(chuàng)建一個DocumentFragment:
<code>
var frag = docuemnt.createDocumentFragment();
</code>
它的parentNode總是為null。
它的特點(diǎn)是使得一組節(jié)點(diǎn)被當(dāng)做一個結(jié)點(diǎn)看待：如果給appendChild()、insertBefore()、replaceChild()傳遞一個DocumentFragment，其實(shí)是將該文檔片段的所有子節(jié)插入到文檔中，而非片段本身。

文檔和元素的集合形狀和滾動

文檔坐標(biāo)和視口坐標(biāo)
  • 查詢窗口滾動條的位置
    scrollLeft 、scrollTop
  • 查詢窗口的視口尺寸
    clientWidth 、clientHeight(他們對于i、code、span等內(nèi)聯(lián)元素返回值為0)
查詢元素的幾何尺寸

判定一個元素的尺寸和位置最簡單的方法是調(diào)用getBoundingClientRect()方法。沒有參數(shù)，返回一個由left、right、top和bottom屬性的對象。
<code>
var box = e.getBoundingClientRect();
var offsets = getScrollOffsets();
var x= box.left + offsets.x;
var y = box.top + offsets.y;
</code>
返回height和width屬性：
<code>
var box = e.getBoundingClientRect();
var w = box.width || (box.right-box.left);
var h = box.height || (box.bottom - box.top);
</code>

判定元素在某點(diǎn)

用Document對象的elementFromPoint()方法來判定元素在某個點(diǎn)。
傳遞x和y坐標(biāo)，返回一個在指定位置的一個元素，如果指示的點(diǎn)在視口以外，elementFromPoint()返回Null.

滾動

Window對象的scroll()方法接收一個點(diǎn)的x和y坐標(biāo)，并作為滾動條的偏移量設(shè)置它們。
<code>
var documentHeight = document.documentElement.offsetHeight;
var viewportHeight = window.innerHeight;
window.scrollTo(0,documentHeight-viewportHeight);
</code>

關(guān)于元素尺寸、位置和溢出的更多信息

offsetParent屬性指定offsetLeft和offsetTOP屬性所相對的額父元素，如果offsetParent為null，這些屬性都是文檔坐標(biāo)。

HTML表單

HTML表單元素
HTML常用表單元素.png
選取表單和表單元素

表單和他們所包含的元素可以用如getElementById()和getElementsByTagName()等方法從文檔中來選取：
<code>
var fields = document.getElementById("address").getElementsByTagName("input");
</code>

表單和元素的屬性

elements[]數(shù)組時(shí)Form對象中最有趣的屬性。

  • action、encoding、method和target屬性直接對應(yīng)于<form>元素的action、encoding、method和target等HTML屬性。
  • Form支持submit()和reset()方法來提交和重置表單。
表單和元素的事件處理程序

每個Form元素都有一個onsubmit事件處理程序來偵測表單提交，還有一個onreset事件處理程序來偵測表單重置。

  • <i>onsubmint事件處理程序只能通過單擊"提交"按鈕來觸發(fā)。在表單提交前調(diào)用，通過返回false能夠取消提交動作。</i>
  • <i>onreset事件處理程序在表單重置之前調(diào)用，通過返回false能夠阻止表單元素被重置，并且只能通過單擊“重置”按鈕被觸發(fā)”。</i>
按鈕

按鈕本身沒有默認(rèn)的行為，除非他有onclick事件處理程序。

  • 以<inout>元素定義的按鈕會將value屬性值以純文本顯示。
  • 以<button>元素定義的按鈕會將元素的一切內(nèi)容顯示出來。
開關(guān)按鈕

復(fù)選框和單選元素就是開關(guān)按鈕。

文本域

value屬性表示用戶輸入的文本，通過設(shè)置該屬性值可以顯式地指定應(yīng)該再輸入域中顯式的文本。
在h5中，placeholder屬性制定了用戶輸入前在輸入域中顯示的提示信息：
<code>
Arrival Stae:<input type = "text" name = "arrival" placeholder = "yyyy-mm-dd">
</code>
文本輸入域的onchange事件處理程序是在用戶輸入新的文本或編輯已存在的文本時(shí)觸發(fā)，他標(biāo)明用戶完成了編輯并將焦點(diǎn)移出了文本域。

選擇框和選項(xiàng)元素

Select元素表示用戶可以做出選擇的一組選項(xiàng)。當(dāng)其size大于1時(shí)，它將顯示為列表中的選項(xiàng)。

  • 如果Select元素有mutiple屬性，也就是Select對象的type屬性值為"select-mutipe"，那就允許用戶選取多個選項(xiàng)
  • 否則，只能選取一個選項(xiàng)，它的type 屬性值為"select-one".

其他文檔屬性

Document的屬性
  • cookie
    允許JavaScript程序讀、寫HTTP cookie的特殊的屬性。
  • domain
    該屬性允許當(dāng)Web頁面之間交互時(shí)，相同域名下相互信任的Web服務(wù)器之間協(xié)作放寬同源策略安全限制。
  • lastModified
    包含文檔修改時(shí)間的字符串
  • location
    與Window對象的location屬性引用同一個Location對象。
  • referrer
    表示瀏覽器導(dǎo)航到當(dāng)前連接的上一個文檔。
  • URL
    文檔的URL，只讀字符串而不是Location對象。
Document.write()方法

document.write()會將其字符串參數(shù)連接起來，然后將結(jié)果字符串插入到文檔中調(diào)用它的腳本元素的位置。當(dāng)腳本執(zhí)行結(jié)束，瀏覽器解析生成的輸出并顯示它。

只有在解析文檔時(shí)才能使用write()方法輸出HTML到當(dāng)前文檔中。在設(shè)置了defer和async屬性的腳本中不要使用document.write()。

還可以使用write()方法在其他窗口或框架頁中來創(chuàng)建整個全新文檔。

Document.writeln()方法在參數(shù)的輸出之后追加一個換行符。
查詢選取的文本

標(biāo)準(zhǔn)的window.getSelection()方法返回一個Selection對象，后者描述了當(dāng)前選取的一系列一個或多個Range對象。toString()方法是Selection對象中的特性，返回選取的純文本內(nèi)容。但是無法返回表單元素中的文本。
IE瀏覽器中使用createRange()方法返回IE特有的TextRange對象，它的text屬性包含了選取的文本，可以返回文檔中任意地方選取的文本。

可編輯的內(nèi)容
  • 設(shè)置任何標(biāo)簽的HTML contenteditable屬性
  • 設(shè)置對應(yīng)元素的JavaScript contenteditable屬性
    是元素的內(nèi)容變成可編輯，當(dāng)用戶單擊該元素的內(nèi)容時(shí)就會出現(xiàn)插入光標(biāo)，用戶敲擊鍵盤就可以插入其中。
  • 將Document對象的designMode屬性設(shè)置為字符串"on"使得整個文檔可編輯。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • DOM概覽 上圖的每個方框是文檔的一個節(jié)點(diǎn)，它表示一個Node對象。 選擇文檔元素 獲取文檔的一個或多個元素有如下...
    kissLife閱讀 685評論 0贊 0
  • DOM概覽 文檔對象模型（DOM）是表示和操作HTML和XML文檔內(nèi)容的基礎(chǔ)API。 選取文檔元素 用指定的id屬...
    ForeverYoung20閱讀 259評論 0贊 0
  • 文檔和元素的幾何形狀和滾動 當(dāng)瀏覽器在窗口中渲染文檔時(shí)，它創(chuàng)建文檔的一個視覺表現(xiàn)層，在那里每個元素有自己的位置和尺...
    kissLife閱讀 801評論 0贊 0
  • 一、JS前言 （1）認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))，知道了CSS樣式(也稱為表示)，會使用HT...
    凜0_0閱讀 2,807評論 0贊 8
  • 看完《少年巴比倫》心中竟情不自禁,對愛情產(chǎn)生了一絲絲的向往,我談過一次不成功的戀愛,曾經(jīng)向往著為這個人付出一切,可...
    文小夢閱讀 529評論 0贊 0