JavaScript HTML DOM節點型別之Document型別(Document物件屬性和Document物件集合屬性)
ocument
物件使我們可以用JavaScript對 HTML 頁面中的所有元素進行訪問。要訪問 HTML 頁面中元素,除可以用Document
物件中的方法外,還可以通過Document
物件的屬性。Document
物件的屬性和方法中有的可返回單個Element
元素物件,有的會返回一個HTMLCollection
元素集合物件,其中儲存了對錨、表單、連結以及其他元素的引用。
在1998年定義的HTML DOM 1級規範中,共定義了11個HTML物件、物件集合、屬性,這些在現在的HTML5中仍然適用。在其後的HTML
DOM 3
級規範中,更多的物件、集合和屬性被新增。
1. Document
物件屬性
通過Document
物件屬性其返回值都是一單獨物件,或HTML
Element
元素物件。具體屬性如下:
屬性名 | 說名 | DOM級別 |
---|---|---|
document.body | 返回<body>元素 | 1 |
document.cookie | 返回或設定與當前文件相關的cookie | 1 |
document.domain | 返回當前文件的伺服器域名 | 1 |
document.referrer | 返回連線至當前文件的文件連線 | 1 |
document.title | 返回當前文件的<title>元素 | 1 |
document.URL | 返回當前文件的完整URL | 1 |
2. Document
物件集合屬性
Document
物件中還有一些屬性,這些屬性與使用getElementsByTagName
等方法的返回值類似,都是HTMLCollection
元素集合。這些屬性如下:
屬性名 | 說名 | DOM級別 |
---|---|---|
document.anchors | 返回文件中name特性的<a>元素物件的集合 | 1 |
document.applets | 返回文件中<applet>元素物件的集合(在HTML5中已棄用) | 1 |
document.forms | 返回文件中<form>元素物件的集合 | 1 |
document.images | 返回文件中<image>元素物件的集合 | 1 |
document.links | 返回文件中具有href特性的,<area>和<a>元素物件的集合 | 1 |
3. HTML DOM 3
中新增的Document
物件屬性
在HTML DOM 3
級規範中擴充套件了更多的Document
物件屬性,這些屬性值如下:
屬性名 | 說名 | DOM級別 |
---|---|---|
document.baseURI | 返回文件基礎URL | 3 |
document.doctype | 返回文件的型別宣告(DTD) | 3 |
document.documentElement | 返回文件的根節點,在HTML中是<form>元素 | 3 |
document.documentMode | 返回瀏覽器渲染文件的模式 | 3 |
document.documentURI | 返回文件的URI | 3 |
document.domConfig | 返回normalizeDocument()被呼叫時所使用的配置 | 3 |
document.embeds | 返回文件中<embed>元素物件的集合 | 3 |
document.head | 返回文件中<head>元素物件 | 3 |
document.head | 返回文件中<head>元素物件 | 3 |
document.implementation | 返回處理該文件的 DOMImplementation 物件 | 3 |
document.inputEncoding | 返回文件的編碼方式 | 3 |
document.lastModified | 返回文件最後更新的日期和時間 | 3 |
document.readyState | 返回文件的載入狀態 | 3 |
document.scripts | 返回文件中<script>元素物件 | 3 |
document.strictErrorChecking | 返回文件是否強制錯誤檢查 | 3 |
注意:在 W3C DOM核心(Core DOM
)中,Document
文件物件繼承Node節點物件所有的屬性和方法。雖然Node
物件中的所有的屬性和方法都同時存在Document
物件中,但很多屬性和方法在文件物件中是沒有意義的,如:attributes
(文件物件沒有屬性)、nextSibling
(文件物件沒有下一個節點),在使用時應該避免這些方法和屬性。
在瀏覽器,每個載入瀏覽器的 HTML 文件都會成為Document
物件。JavaScript用Document
型別表示文件,document
是HTML
Document
物件的一個例項,HTML Document
是對DOM
Document
的一個擴充套件,定義 HTML 專用的屬性和方法,本文主要介紹HTML Document
。因為Document
是Window
物件的一個屬性window.document
,所以它是一個全域性物件。通過Document
物件,我們可以對
HTML 頁面中的所有元素進行訪問。
1. HTML DOMDocument
物件
Document
是DOM
節點型別之一。
Document
物件是對你HTML頁面的一個引用。當你訪問HTML頁面中的元素時,你總是會首先訪問Document
物件
Document
物件中包含一些方法,通過這些方法你可以實現對頁面元素的查詢、新增、刪除和修改。
Document
物件中屬性一可以分為兩類,一類用於訪問HTML頁面元素,如:document.body
會返回對body
元素的引用、document.title
會返回對title
元素的引用。另一類屬性,其返回值是HTMLCollection
物件集合,如:document.forms
會返回頁面中所有form
元素的集合,document.images
會返回頁面中所有image
元素的集合。
2. HTML DOMDocument
物件中的方法
HTML DOMDocument
物件中的方法分別用於查詢元素和操作元素,在對元素進行新增、修改、刪除等操作前,首先需要查詢到目標元素。
2.1 查詢DOM元素的方法
方法 | 說明 |
---|---|
document.getElementById(id) | 通過元素id查詢元素 |
document.getElementsByName(name) | 通過元素名查詢元素 |
document.getElementsByTagName(name) | 通過元素標籤名查詢元素 |
document.getElementsByClassName(name) | 通過元素樣式名查詢元素 |
上面是幾個按不同方式在HTML文件中查詢元素的方法,除document.getElementById(id)
方法外,其它都會返回一個HTML元素的集合,詳細請參考:JavaScript
獲取DOM文件元素。
2.2 DOM節點操作的方法
方法 | 描述 |
---|---|
document.createElement(element) | 建立一個HTML元素 |
document.removeChild(element) | 移除一個HTML元素 |
document.appendChild(element) | 新增HTML元素 |
document.replaceChild(element) | 替換HTML元素 |
document.write(text) | 寫入到HTML的輸出流 |
以上方法是針對HTML元素的新增、修改、刪除操作。具體請參考:Node節點操作、建立DOM節點.