當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML DOM(一)：认识DOM

發布時間：2025/3/20 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML DOM(一)：认识DOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是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 文檔的對象。?

節點
? ? ? ?依據 DOM，HTML 文檔中的每一個成分都是一個節點。
? ? ? ?DOM 是這樣規定的：

整個文檔是一個文檔節點?
每個 HTML 標簽是一個元素節點?
包括在 HTML 元素中的文本是文本節點?
每個 HTML 屬性是一個屬性節點?
凝視屬于凝視節點?

Node 層次
? ? ? ?節點彼此都有等級關系。HTML 文檔中的全部節點組成了一個文檔樹（或節點樹）。HTML 文檔中的每一個元素、屬性、文本等都代表著樹中的一個節點。樹起始于文檔節點，并由此繼續伸出枝條，直到處于這棵樹最低級別的全部文本節點為止。

? ? ? ?以下這個圖片表示一個文檔樹（節點樹）：

? ? ? ?

文檔樹（節點數）
? ? ? ?請看以下這個HTML文檔：? ? ? ?

<html><head><title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html>? ? ? ?上面全部的節點彼此間都存在關系。除文檔節點之外的每一個節點都有父節點。舉例，<head> 和 <body> 的父節點是 <html> 節點，文本節點 "Hello world!" 的父節點是 <p> 節點。大部分元素節點都有子節點。例如說，<head> 節點有一個子節點：<title> 節點。<title> 節點也有一個子節點：文本節點 "DOM Tutorial"。當節點分享同一個父節點時，它們就是同輩（同級節點）。例如說，<h1> 和 <p>是同輩，由于它們的父節點均是 <body> 節點。節點也能夠擁有后代，后代指某個節點的全部子節點，或者這些子節點的子節點，以此類推。例如說，全部的文本節點都是 <html>節點的后代，而第一個文本節點是 <head> 節點的后代。節點也能夠擁有先輩。先輩是某個節點的父節點，或者父節點的父節點，以此類推。例如說，全部的文本節點都可把 <html> 節點作為先輩節點。

總結

以上是生活随笔為你收集整理的HTML DOM(一)：认识DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
DOM

上一篇：【转】pdf 中如何把几页缩小成一页打印
下一篇： 2017年html5行业报告,云适配发布