2020/6/11 JavaScript高級程序設計 DOM

時間 2020-06-27

標籤 javascript 高級程序設計 dom 欄目 JavaScript 简体版

原文原文鏈接

DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程序接口）。他描繪了一個層次化的節點樹，容許開發人員添加、移除和修改頁面的某一部分。javascript

10.1 節點層次

DOM將任何HTML和XML文檔描繪成一個由多層節點構成的結構。html

文檔節點(Document)是每一個文檔的根節點。文檔節點只有一個子節點（HTML文檔中實終是<html>），咱們稱之爲文檔元素（每一個文檔只能有一個文檔元素）。文檔元素是文檔的最外層元素，其餘全部元素都包含在文檔元素中。java

每一段標記都能經過樹中一個節點來表示，包括特性、文檔類型、註釋等，共有12種節點類型。這些類型都繼承自一個基類型。node

10.1.1 Node類型

JavaScript中的全部節點類型都繼承自Node類型，全部的節點類型都共享相同的基本屬性和方法。跨域

nodeType屬性：代表節點的類型（12種）數組

eg：Node.ELEMENT_NODE(1)； //元素節點瀏覽器

經過該屬性能夠肯定一個節點的類型，能夠經過類型字面量判等，也能夠經過數字值比較。app

if (someNode.nodeType == Node.ELEMENT_NODE){  //在IE中無效
    alert("Node is element.");
}

if (someNode.nodeType == 1){  //適用於任何瀏覽器
    alert("Node is element.");
}

1. nodeName和nodeValue屬性

能夠了解節點的具體信息。dom

對於元素節點，nodeName保存的始終是標籤名，nodeValue的值始終是null。工具

2. 節點關係

屬性：

1	childNodes屬性	保存NodeList對象（類數組，但不是數組），這個對象也有length屬性。能夠經過方括號，也能夠經過item()方法訪問節點。能夠經過Array.prototype.slice()方法將其轉換爲數組。
2	parentNode屬性	指向父節點。
3	previousSibling / nextSibling屬性	訪問同一列表中的其餘屬性。即前一個和後一個同胞節點。
4	firstChild / lastChild屬性	指向childNodes列表的第一個和最後一個節點。

方法：

1	hasChildNodes()	檢驗是否存在子節點。存在時返回true。
2	ownerDocument()	指向整個文檔的文檔節點。方便直接到達頂端。

3. 操做節點

1	appendChild()	向childNodes列表的末尾添加一個節點。返回新的節點。因爲任何一個節點不能同時出如今多個位置上，因此當傳入的節點是父節點的子節點時，這個節點會變成最後一個子節點。
2	insertBefore()	將節點插入到childNodes列表中一個特定的位置。接收兩個參數：要插入的節點和做爲參照的節點。插入節點後，被插入節點會成爲參照節點的前一個同胞節點，同時被方法返回。省略參照節點時與appendChild()執行相同的操做。
3	replaceChild()	替換節點（複製全部的關係指針）。接收兩個參數：要插入的節點和要替換的節點。被替換的節點將從文檔樹中移除，但仍然在文檔中，只是沒有了本身的位置（指針）。
4	removeChild()	移除節點。返回被移除的節點。一樣被移除的節點仍然在文檔中。

PS1：使用這幾個方法必須取得父節點（使用parentNode屬性）。

PS2：不是全部類型的節點都有子節點。在不支持子節點的節點上調用這些方法，會拋出錯誤。

4. 其餘方法

cloneNode()

建立調用這個方法的節點的一個徹底相同的副本。接受一個布爾值參數，表示是否執行深複製（true則執行深複製）。

深複製：複製節點以及整個子節點樹
淺複製：只複製節點自己

複製後返回的節點歸文檔全部，沒有爲他指定父節點。要經過其餘的方法把他加入到文檔中。

IE>9及其餘瀏覽器會計入空白節點。

normalize()

處理文檔樹中的文本節點。

出現文本節點不包含文本 => 刪除空白文本節點
接連出現兩個文本節點 => 合併爲一個文本節點

10.1.2 Document類型

Document類型表示文檔。

document對象是HTMLDocument的一個實例，表示整個HTML頁面。
document對象是window對象的一個屬性，能夠做爲全局對象來訪問。

Document節點的特徵：

nodeType的值爲9；
nodeName的值是"#document"；
nodeValue和parentNode的值爲null；
ownerDocument的值爲null。

1. 文檔的子節點

1	DocumentType（最多一個）	<!DOCTYPE>標籤，能夠經過document.doctype屬性來訪問他的信息。
2	Element（最多一個）	文檔元素<html>。經過documentElement屬性或childNodes列表（在無處理指令的狀況下是firstChild）訪問可快速找到html元素。 document.body屬性能夠指向<body>元素（由於該元素使用頻率高，爲了便於開發增添該屬性）。
3	ProcessingInstruction	表示處理指令。
4	Comment	註釋。

2. 文檔信息

做爲HTMLDocument的實例，document對象還有一些特殊的屬性。

1	title	<title>元素中的文本，是當前頁面的標題。
2	URL	完整的URL。
3	domain	頁面的域名。僅domain能夠設置。但有必定的限制：不能設置爲URL中不包含的域若是域名一開始是「鬆散的」(wrox.com)，那麼就不能再將其設置回「緊繃的」(p2p.wrox.com) 做用：將每一個頁面的document.domain設置爲相同的值，就能夠互相訪問對方包含的JavaScript對象了。（解決跨域問題）
4	referrer	連接到當前頁面的那個頁面的URL。在沒有來源頁面的狀況下是空字符串。

3. 查找元素

1	getElementById()	參數爲要取得元素的ID。找到返回該元素，沒有找到返回null。若是有多個id值相同，則只會返回第一個。
2	getElementByTagName()	參數爲要取得元素的標籤名。返回元素的NodeList。在HTML文檔中，返回的是HTMLCollection對象。能夠經過方括號或者item()方法來訪問。
3	nameItem()	*HTMLCollection對象的方法*。經過元素的name屬性取得集合中的項（第一項）。同時HTMLCollection對象還支持按名稱訪問項。
4	getElementByName()	返回帶有給定name屬性的全部元素（一個HTMLCollection）。

4. DOM的一致性檢測

ducument.implementation屬性：提供關於實現了DOM 哪些部分的信息的對象。

他有一個方法，hasFeature()。接收兩個參數：要檢測的DOM功能的名稱和版本號。若是支持給定名稱和版本的功能，則返回true。

檢驗結果true不意味着現實與規範一致，最好除了檢測hasFeature()以外，同時使用能力檢測。

5. 文檔寫入

write() / writeln()：接受一個字符串，即寫入輸出流中的文本。write()會原樣寫入，writeln()會在字符串末尾添加一個換行符（\n）。這兩個方法能夠向頁面中動態的加入內容。

//在頁面加載過程當中輸出當前的日期和時間
document.write("<strong>" + (new Date()).toString() + "</strong>");

同時還能夠用來動態的包含外部資源，例如JavaScript文件等。

document.write("<script type=\"text/javascript\" src=\"file.js\"> + "<\/script>");

PS：因爲不能直接包含字符串"</script>"（這樣會致使該字符串被解釋爲腳本的結束，後面的代碼沒法運行），因此要將這個字符串分開寫。

在頁面被呈現的過程當中，會直接輸出內容。若是在文檔加載結束後（window.onload）再調用write()，那麼輸出的內容會重寫整個頁面。

方法open()和close()分別用於打開和關閉網頁的輸出流。

10.1.3 Element類型

Element類型提供了對元素標籤名、子節點及特性的訪問。Element節點具備如下特徵：

nodeType值爲1；
nodeName的值爲元素的標籤名；
nodeValue的值爲null；
parentNode多是Document或Element；

tagName屬性：返回訪問元素的標籤名（與nodeName相同）。 => 在HTML中標籤名始終以所有大寫表示，須要檢驗標籤類型時最好調用toLowerCase()方法。

1. HTML元素

全部HTML元素都由HTMLElement類型表示。HTMLElement類型直接繼承自Element並添加了一些屬性。

id，元素在文檔中的惟一標識；
title，有關元素的附加說明信息，通常經過工具提示條顯示出來；
dir，語言的方向（"ltr"，即left-to-right）或「rtl」；
className，與元素的class特性對應，爲元素制定的CSS類。

2. 取得特性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。