HTML DOM 對象

---

HTML DOM 節點

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

• #文檔是一個文檔。

• 所有的HTML元素都是元素節點。

• 所有 HTML 屬性都是屬性節點。

• 文字插入到 HTML 元素是文字節點。 are text nodes。

• 註解是註解節點。

---

Document 物件

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

document 物件是HTML文件的根節點與所有其他節點（元素節點，文字節點，屬性節點, 註解節點）。

Document 物件可讓我們從腳本中對 HTML 頁面中的所有元素進行存取。

提示：Document 物件是 Window 物件的一部分，可透過 window.document 屬性對其進行存取。

---

瀏覽器支援

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

---

Document 物件屬性與方法

HTML文件中可以使用上述屬性與方法:

##傳回目前取得焦點元素document.addEventListener()向文件新增句柄document.adoptNode(node)#從另外一個文件回傳 adapded 節點到目前文件。 document.anchors傳回對文件中所有 Anchor 物件的參考。 document.applets傳回對文件中所有 Applet 物件的參考。 document.baseURI返回文檔的絕對基礎URIdocument.bodydocument.close()document.cookiedocument.createAttribute()document.createComment()document.createDocumentFragment()document.createElement()document.createTextNode()document.doctypedocument.documentElement##document.documentMode#回傳用於透過瀏覽器渲染文件的模式document.documentURI設定或傳回文件的位置傳回目前文件的網域。 傳回normalizeDocument()被呼叫時所使用的設定傳回文件中所有嵌入的內容（embed）集合傳回對文件中所有Form 物件參考。 #傳回文件中所有指定類別名稱的元素集合，作為 NodeList 物件。 傳回對擁有指定 id 的第一個物件的參考。 傳回指定名稱的物件集合。 傳回指定標籤名的物件集合。 傳回對文件中所有 Image 物件參考。 傳回處理該文件的 DOMImplementation 物件。 把一個節點從另一個文件複製到該文件以便應用。 傳回用於文件的編碼方式（在解析時）。

屬性/ 方法	描述
#document.activeElement
##傳回文檔的body元素
關閉以document.open() 方法開啟的輸出流，並顯示選定的資料。
設定或傳回與目前文件相關的所有 cookie。
建立一個屬性節點
createComment() 方法可建立註解節點。
#建立空的 DocumentFragment 對象，並傳回此物件。
建立元素節點。
建立文字節點。
#傳回與文件相關的文件類型宣告 (DTD)。
傳回文件的根節點
	##document.domain
	document.domConfig
	document.embeds
	document.forms
	document. getElementsByClassName()
	document.getElementById()
	document.getElementsByName()
	document.getElementsByTagName()
	document.images
	document.implementation
	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.ownerElement文件沒有自己的節點document.parentNode文件沒有父節點##document.previousSibling document.textContent##

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