思維導圖
HTML DOM 簡介
HTML 文檔對象模型(HTML Document Object Model)定義了訪問和處理 HTML 文檔的標準方法。
在繼續學習之前,您需要對下面的知識有基本的瞭解:
HTML / XHTML
JavaScript
什麼是 DOM?
通過 JavaScript,您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西,JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口。
這個入口,連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性,都是通過文檔對象模型來獲得的(DOM)。
在 1998 年,W3C 發佈了第一級的 DOM 規範。這個規範允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的瀏覽器都執行了這個標準,因此,DOM 的兼容性問題也幾乎難覓蹤影了。
DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
DOM 被分爲不同的部分(核心、XML及HTML)和級別(DOM Level 1/2/3):
Core DOM
定義了一套標準的針對任何結構化文檔的對象
XML DOM
定義了一套標準的針對 XML 文檔的對象
HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
DHTML:是很多技術的簡稱
** html: 封裝數據
** css:使用屬性和屬性值設置樣式
** dom:操作html文檔(標記型文檔)
** javascript:專門指的是js的語法語句(ECMAScript)
HTML DOM 節點
HTML文檔中的每個成分都是一個節點。
節點(Node)
根據DOM,HTML文檔中的每個成分都是一個節點。
DOM 是這樣規定的:
1、整個文檔是一個文檔節點 (Document)
2、每個 HTML 標籤是一個元素節點 (Element)
3、包含在 HTML 元素中的文本是文本節點
4、每一個 HTML 屬性是一個屬性節點
5、註釋屬於註釋節點
Node 層次
節點彼此都有等級關係。
HTML 文檔中的所有節點組成了一個文檔樹(或節點樹)。HTML 文檔中的每個元素、屬性、文本等都代表着樹中的一個節點。
樹起始於文檔節點,並由此繼續伸出枝條,直到處於這棵樹最低級別的所有文本節點爲止。
下面這個圖片表示一個文檔樹(節點樹):
HTML DOM 訪問節點
通過 DOM,您可訪問 HTML 文檔中的每個節點。
查找並訪問節點
你可通過若干種方法來查找您希望操作的元素:
通過使用 getElementById() 和 getElementsByTagName() 方法
通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
* getElementById() 和 getElementsByTagName() 這兩種方法,可查找整個 HTML 文檔中的任何 HTML 元素。
這兩種方法會忽略文檔的結構。假如您希望查找文檔中所有的 <p> 元素,
getElementsByTagName() 會把它們全部找到,不管 <p> 元素處於文檔中的哪個層次。
同時,getElementById() 方法也會返回正確的元素,不論它被隱藏在文檔結構中的什麼位置。
節點列表(nodeList)
parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構,在文檔中進行“短距離的旅行”。
請看下面這個 HTML 片段:
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代碼中,第一個 <td> 是 <tr> 元素的首個子元素(firstChild),
而最後一個 <td> 是 <tr>元素的最後一個子元素(lastChild)。
此外,<tr> 是每個 <td>元 素的父節點(parentNode)。
對 firstChild 屬性最普遍的用法是訪問某個元素的文本:
var x=[a paragraph];
var text=x.firstChild.nodeValue;
parentNode 屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有 id 爲 "maindiv" 的節點:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先,您需要找到帶有指定 id 的節點,然後移至其父節點並執行 removeChild() 方法。
根節點
有兩種特殊的文檔屬性可用來訪問根節點:
document.documentElement
document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展,提供了對 <body> 標籤的直接訪問。
HTML DOM 節點信息
nodeName、nodeValue 以及 nodeType 包含有關於節點的信息。
節點信息
每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是:
nodeType(節點類型)
nodeName(節點名稱)
nodeValue(節點值)
========================
nodeType 屬性可返回節點的類型。
元素類型 節點類型
元素 1
屬性 2
文本 3
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標籤名稱,如 input, div, img ...
屬性節點的 nodeName 是屬性名稱, 如 id, name, src ...
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
註釋:nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
nodeValue
nodeValue 屬性對於 元素節點 和 文檔節點 是不可用的。
對於屬性節點,nodeValue 屬性包含屬性值。
對於文本節點,nodeValue 屬性包含文本。
實際應用
1、Document對象
Document創建標籤.
createElement(); -----創建一個元素標籤
createTextNode(); -----創建一個文本節點
node對象.appendChild(node);
案例:
<BODY> <ul id="city"> <li>北京</li> <li>上海</li> <li>廣州</li> </ul> </BODY> <SCRIPT LANGUAGE="JavaScript"> // 需求:創建一個<li>深圳</li> 將其放在ul中 // 1.創建li標籤 <li></li> var liElement = document.createElement("li"); // 2.創建一個文本節點 深圳 var textElement = document.createTextNode("深圳"); // 3.將文本內容添加到li中 <li>深圳</li> liElement.appendChild(textElement); // 4.將li添加到ul中.(查找ul.) var city = document.getElementById("city"); city.appendChild(liElement); </SCRIPT>
write()方法:
向頁面輸出變量(值)
向頁面輸出html代碼
2、Element對象(瞭解)
** 如何獲取標籤的子標籤(唯一有效辦法)(*********)
- 使用getElementsByTagName方法
元素對象:元素(標籤)
元素對象操作屬性
getAttribute(“屬性的名”); // 獲得屬性的值
setAttribute(“屬性名”,”屬性值”); // 添加和修改,(value值設置不了)
removeAttribute(“屬性名”); // 移除屬性
案例:操作元素的屬性
// 操作屬性 (對屬性進行增加 修改 刪除)
3、Node對象(瞭解)
節點對象的屬性:父節點 子節點及同輩節點
parentNode
節點的插入
appendChild(); 剪切粘貼的效果
insertBefore(newNode,oldNode);
刪除和替換節點.
removeChild() //必須是 父節點.removeChild(子節點)
replaceChild(newNode,oldNode)
複製節點
cloneNode(boolean); boolean: true 克隆的時候 帶着子節點一起克隆; false 只克隆當前節點,默認false