1. 程式人生 > >JavaScript HTML DOM節點型別之Document型別(Document物件屬性和Document物件集合屬性)

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型別表示文件,documentHTML Document物件的一個例項,HTML Document是對DOM Document的一個擴充套件,定義 HTML 專用的屬性和方法,本文主要介紹HTML Document。因為DocumentWindow物件的一個屬性window.document,所以它是一個全域性物件。通過Document物件,我們可以對 HTML 頁面中的所有元素進行訪問。

1. HTML DOMDocument物件

DocumentDOM 節點型別之一。

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節點.