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

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

10.1 節點層次

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

文檔節點(Document)是每個文檔的根節點。文檔節點只有一個子節點(HTML文檔中實終是<html>),我們稱之為文檔元素(每個文檔只能有一個文檔元素)。文檔元素是文檔的最外層元素,其他所有元素都包含在文檔元素中。

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

10.1.1 Node類型

 JavaScript中的所有節點類型都繼承自Node類型,所有的節點類型都共享相同的基本屬性和方法。

nodeType屬性:表明節點的類型(12種)

eg:Node.ELEMENT_NODE(1);  //元素節點

通過該屬性可以確定一個節點的類型,可以通過類型字面量判等,也可以通過数字值比較。

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

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

1. nodeName和nodeValue屬性

可以了解節點的具體信息。

對於元素節點,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. 其他方法

1 cloneNode()

創建調用這個方法的節點的一個完全相同的副本。接受一個布爾值參數,表示是否執行深複製(true則執行深複製)。

  • 深複製:複製節點以及整個子節點樹
  • 淺複製:只複製節點本身

複製后返回的節點歸文檔所有,沒有為他指定父節點。要通過其他的方法把他加入到文檔中。

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

2 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. 取得特性

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!