首頁 > 開發者 > JavaScript
HTML DOM基礎知識，htmldom基礎知識
HTML DOM基礎知識一、什麼是DOM？
1、HTML DOM 定義了訪問和操作HTML文檔的標準方法。
2、HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
3、通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文件物件模型來獲得的（DOM）。DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
4、DOM 被分為不同的部分（核心、XML及HTML）和層級（DOM Level 1/2/3）：
二、HTML DOM節點及節點樹
1、節點
根據 DOM，HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
2、Node 層次
節點彼此都有等級關係。
HTML 文檔中的所有節點群組成了一個文檔樹（或節點樹）。HTML 文檔中的每個元素、屬性、文本等都代表著樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低層級的所有文本節點為止。
下面這個圖片表示一個文檔樹（節點樹）：
3、節點樹
1 <html>2 <head>3 <title>DOM Tutorial</title> 4 </head> 5 <body> 6 <h1>DOM Lesson one</h1> 7 <p>Hello world!</p> 8 </body> 9 </html>
上面所有的節點彼此間都存在關係。
*除文檔節點之外的每個節點都有父節點。舉例，<head> 和 <body> 的父節點是 <html> 節點，文本節點 "Hello world!" 的父節點是 <p> 節點。
*大部分元素節點都有子節點。比方說，<head> 節點有一個子節點：<title> 節點。<title> 節點也有一個子節點：文本節點 "DOM Tutorial"。
*當節點分享同一個父節點時，它們就是同輩（同級節點）。比方說，<h1> 和 <p>是同輩，因為它們的父節點均是 <body> 節點。
*節點也可以擁有後代，後代指某個節點的所有子節點，或者這些子節點的子節點，以此類推。比方說，所有的文本節點都是 <html>節點的後代，而第一個文本節點是 <head> 節點的後代。
*節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點，以此類推。比方說，所有的文本節點都可把 <html> 節點作為先輩節點。
三、ＨＴＭＬ ＤＯＭ訪問節點的方法１．尋找並訪問節點
你可通過若干種方法來尋找您希望操作的元素：
２．getElementById() 和 getElementsByTagName()
（１）getElementById() 可通過指定的 ID 來返回元素，文法：
document.getElementById("ID");
（２）getElementsByTagName() 方法會使用指定的標籤名返回所有的元素（作為一個節點列表），這些元素是您在使用此方法時所處的元素的後代。getElementsByTagName() 可被用於任何的 HTML 元素：
文法：
document.getElementsByTagName("標籤名稱");
或者：
document.getElementById('ID').getElementsByTagName("標籤名稱");
＜訪問節點列表時，索引號從０開始＞
３．parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行“短距離的旅行”。對 firstChild 最普遍的用法是訪問某個元素的文本；parentNode 屬性常被用來改變文檔的結構；
４．根節點
有兩種特殊的文件屬性可用來訪問根節點：
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴充，提供了對 <body> 標籤的直接存取。
四．節點資訊
每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是：
１．nodeName
nodeName 屬性含有某個節點的名稱。
注釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
２．nodeValue
對於文本節點，nodeValue 屬性包含文本。
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文檔節點和元素節點是停用。
３．nodeType
nodeType 屬性可返回節點的類型。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
