HTML DOM Document 物件

HTML DOM 節點

在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節點:

  • 文件是一個文件節點。
  • 所有的HTML元素都是元素節點。
  • 所有 HTML 屬性都是屬性節點。
  • 文字插入到 HTML 元素是文字節點。are text nodes。
  • 註釋是註釋節點。

Document 物件

當瀏覽器載入 HTML 文件, 它就會成為 Document 物件

Document 物件是 HTML 文件的根節點。

Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。

提示:Document 物件是 Window 物件的一部分,可通過 window.document 屬性對其進行訪問。


瀏覽器支援

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要瀏覽器都支援 Document 物件。


Document 物件屬性和方法

HTML文件中可以使用以下屬性和方法:

屬性 / 方法 描述
document.activeElement 返回當前獲取焦點元素
document.addEventListener() 向文件新增控制代碼
document.adoptNode(node) 從另外一個文件返回 adapded 節點到當前文件。
document.anchors 返回對文件中所有 Anchor 物件的引用。
document.applets

返回對文件中所有 Applet 物件的引用。

注意: HTML5 已不支援 <applet> 元素。

document.baseURI 返回文件的絕對基礎 URI
document.body 返回文件的body元素
document.close() 關閉用 document.open() 方法開啟的輸出流,並顯示選定的資料。
document.cookie 設定或返回與當前文件有關的所有 cookie。
document.createAttribute() 建立一個屬性節點
document.createComment() createComment() 方法可建立註釋節點。
document.createDocumentFragment() 建立空的 DocumentFragment 物件,並返回此物件。
document.createElement() 建立元素節點。
document.createTextNode() 建立文字節點。
document.doctype 返回與文件相關的文件型別宣告 (DTD)。
document.documentElement 返回文件的根節點
document.documentMode 返回用於通過瀏覽器渲染文件的模式
document.documentURI 設定或返回文件的位置
document.domain 返回當前文件的域名。
document.domConfig 已廢棄返回 normalizeDocument() 被呼叫時所使用的配置。
document.embeds 返回文件中所有嵌入的內容(embed)集合
document.forms 返回對文件中所有 Form 物件引用。
document.getElementsByClassName() 返回文件中所有指定類名的元素集合,作為 NodeList 物件。
document.getElementById() 返回對擁有指定 id 的第一個物件的引用。
document.getElementsByName() 返回帶有指定名稱的物件集合。
document.getElementsByTagName() 返回帶有指定標籤名的物件集合。
document.images 返回對文件中所有 Image 物件引用。
document.implementation 返回處理該文件的 DOMImplementation 物件。
document.importNode() 把一個節點從另一個文件複製到該文件以便應用。
document.inputEncoding 返回用於文件的編碼方式(在解析時)。
document.lastModified 返回文件被最後修改的日期和時間。
document.links 返回對文件中所有 Area 和 Link 物件引用。
document.normalize() 刪除空文字節點,並連線相鄰節點
document.normalizeDocument() 刪除空文字節點,並連線相鄰節點的
document.open() 開啟一個流,以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
document.querySelector() 返回文件中匹配指定的CSS選擇器的第一元素
document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法,返回文件中匹配的CSS選擇器的所有元素節點列表
document.readyState 返回文件狀態 (載入中……)
document.referrer 返回載入當前文件的文件的 URL。
document.removeEventListener() 移除文件中的事件控制代碼(由 addEventListener() 方法新增)
document.renameNode() 重新命名元素或者屬性節點。
document.scripts 返回頁面中所有指令碼的集合。
document.strictErrorChecking 設定或返回是否強制進行錯誤檢查。
document.title 返回當前文件的標題。
document.URL 返回文件完整的URL
document.write() 向文件寫 HTML 表示式 或 JavaScript 程式碼。
document.writeln() 等同於 write() 方法,不同的是在每個表示式之後寫一個換行符。


警告 !!!

在 W3C DOM核心,文件物件 繼承節點物件的所有屬性和方法。

很多屬性和方法在文件中是沒有意義的。

HTML 文件物件可以避免使用這些節點物件和屬性:

屬性 / 方法 避免的原因
document.attributes 文件沒有該屬性
document.hasAttributes() 文件沒有該屬性
document.nextSibling 文件沒有下一節點
document.nodeName 這個通常是 #document
document.nodeType 這個通常是 9(DOCUMENT_NODE)
document.nodeValue 文件沒有一個節點值
document.ownerDocument 文件沒有主文件
document.ownerElement 文件沒有自己的節點
document.parentNode 文件沒有父節點
document.previousSibling 文件沒有兄弟節點
document.textContent 文件沒有文字節點