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可以設置。但有一定的限制:
作用:將每個頁面的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地圖已可更新顯示潭子電動車充電站設置地點!!
※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!