Document文檔節點 · 前端

[https://www.runoob.com/jsref/dom-obj-document.html](https://www.runoob.com/jsref/dom-obj-document.html) [https://www.w3school.com.cn/xmldom/dom\_htmldocument.asp](https://www.w3school.com.cn/xmldom/dom_htmldocument.asp) [https://developer.mozilla.org/zh-CN/docs/Web/API/Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document) 有window對象引入，所以它是window的一部分，可通過 window.document 屬性對其進行訪問 Document **implements** [`ParentNode`](https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode "ParentNode?混合了所有(擁有子元素的) Node 對象包含的共有方法和屬性。")、HTMLDocument、XMLDocument >[danger]document <- HTMLDocument <- HTMLDocumentPrototype <- DocumentPrototype <- NodePrototype <- EventTargetPrototype <- Object document.body <- HTMLBodyElementPrototype <- HTMLElementPrototype <- ElementPrototype <- NodePrototype <- EventTargetPrototype <- Object ## Document 對象屬性和方法 HTML文檔中可以使用以下屬性和方法: | 屬性 / 方法 | 描述 | | :-- | :-- | |**document.**|| | [activeElement](https://www.runoob.com/jsref/prop-document-activeelement.html) | 返回當前獲取焦點元素 | | [addEventListener()](https://www.runoob.com/jsref/met-document-addeventlistener.html) | 向文檔添加句柄 | | [adoptNode(node)](https://www.runoob.com/jsref/met-document-adoptnode.html) | 從另外一個文檔返回 adapded 節點到當前文檔。 | | [anchors](https://www.runoob.com/jsref/coll-doc-anchors.html) | 返回對文檔中所有 Anchor 對象的引用。 | |all | 返回所有元素 | | ~~applets~~ | 返回對文檔中所有 Applet 對象的引用。**注意:** HTML5 已不支持元素。| | [baseURI](https://www.runoob.com/jsref/prop-doc-baseuri.html) | 返回文檔的絕對基礎 URI | | [**body**](https://www.runoob.com/jsref/prop-doc-body.html) | 返回文檔的body元素 | | [close()](https://www.runoob.com/jsref/met-doc-close.html) | 關閉用 document.open() 方法打開的輸出流，并顯示選定的數據。 | | [cookie](https://www.runoob.com/jsref/prop-doc-cookie.html) | 設置或返回與當前文檔有關的所有 cookie。 | | [**createAttribute**()](https://www.runoob.com/jsref/met-document-createattribute.html) | 創建一個屬性節點 | | [**createComment**()](https://www.runoob.com/jsref/met-document-createcomment.html) | createComment() 方法可創建注釋節點。 | | [**createDocumentFragment**()](https://www.runoob.com/jsref/met-document-createdocumentfragment.html) | 創建空的 DocumentFragment 對象，并返回此對象。 | | [**createElement**()](https://www.runoob.com/jsref/met-document-createelement.html) | 創建元素節點。 | | [**createTextNode**()](https://www.runoob.com/jsref/met-document-createtextnode.html) | 創建文本節點。 | | [doctype](https://www.runoob.com/jsref/prop-document-doctype.html) | 返回與文檔相關的文檔類型聲明 (DTD)。 | | [**documentElement**](https://www.runoob.com/jsref/prop-document-documentelement.html) | 返回文檔的根節點html | | [documentMode](https://www.runoob.com/jsref/prop-doc-documentmode.html) | 返回用于通過瀏覽器渲染文檔的模式 | | [documentURI](https://www.runoob.com/jsref/prop-document-documenturi.html) | 設置或返回文檔的位置 | | [domain](https://www.runoob.com/jsref/prop-doc-domain.html) | 返回當前文檔的域名。 | | domConfig | **已廢棄**。返回 normalizeDocument() 被調用時所使用的配置。 | | [embeds](https://www.runoob.com/jsref/coll-doc-embeds.html) | 返回文檔中所有嵌入的內容（embed）集合 | | [forms](https://www.runoob.com/jsref/coll-doc-forms.html) | 返回對文檔中所有 Form 對象引用。 | | [getElementsByClassName()](https://www.runoob.com/jsref/met-document-getelementsbyclassname.html) | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 | | [getElementById()](https://www.runoob.com/jsref/met-document-getelementbyid.html) | 返回對擁有指定 id 的第一個對象的引用。 | | [getElementsByName()](https://www.runoob.com/jsref/met-doc-getelementsbyname.html) | 返回帶有指定名稱的對象集合。 | | [getElementsByTagName()](https://www.runoob.com/jsref/met-document-getelementsbytagname.html) | 返回帶有指定標簽名的對象集合。 | | [images](https://www.runoob.com/jsref/coll-doc-images.html) | 返回對文檔中所有 Image 對象引用。 | | [implementation](https://www.runoob.com/jsref/prop-document-implementation.html) | 返回處理該文檔的 DOMImplementation 對象。 | | [importNode()](https://www.runoob.com/jsref/met-document-importnode.html) | 把一個節點從另一個文檔復制到該文檔以便應用。 | | [inputEncoding](https://www.runoob.com/jsref/prop-document-inputencoding.html) | 返回用于文檔的編碼方式（在解析時）。 | | [lastModified](https://www.runoob.com/jsref/prop-doc-lastmodified.html) | 返回文檔被最后修改的日期和時間。 | | [links](https://www.runoob.com/jsref/coll-doc-links.html) | 返回對文檔中所有 Area 和 Link 對象引用。 | | [normalize()](https://www.runoob.com/jsref/met-document-normalize.html) | 刪除空文本節點，并連接相鄰節點 | | [normalizeDocument()](https://www.runoob.com/jsref/met-document-normalizedocument.html) | 刪除空文本節點，并連接相鄰節點的 | | [open()](https://www.runoob.com/jsref/met-doc-open.html) | 打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。 | | [**querySelector**()](https://www.runoob.com/jsref/met-document-queryselector.html) | 返回文檔中匹配指定的CSS選擇器的第一元素 | | [**querySelectorAll**()](https://www.runoob.com/jsref/met-document-queryselectorall.html) | document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表 | | [readyState](https://www.runoob.com/jsref/prop-doc-readystate.html) | 返回文檔狀態 (載入中……) | | [referrer](https://www.runoob.com/jsref/prop-doc-referrer.html) | 返回載入當前文檔的文檔的 URL。 | | [removeEventListener()](https://www.runoob.com/jsref/met-document-removeeventlistener.html) | 移除文檔中的事件句柄(由 addEventListener() 方法添加) | | [renameNode()](https://www.runoob.com/jsref/met-document-renamenode.html) | 重命名元素或者屬性節點。 | | [scripts](https://www.runoob.com/jsref/coll-doc-scripts.html) | 返回頁面中所有腳本的集合。 | | [strictErrorChecking](https://www.runoob.com/jsref/prop-document-stricterrorchecking.html) | 設置或返回是否強制進行錯誤檢查。 | | [title](https://www.runoob.com/jsref/prop-doc-title.html) | 返回當前文檔的標題。 | | [URL](https://www.runoob.com/jsref/prop-doc-url.html) | 返回文檔完整的URL | | [write()](https://www.runoob.com/jsref/met-doc-write.html) | 向文檔寫 HTML 表達式或 JavaScript 代碼。 | | [writeln()](https://www.runoob.com/jsref/met-doc-writeln.html) | 等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。 | |[`characterSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/characterSet)|返回文檔正在使用的字符集| |[`compatMode`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode)|指示文檔是否以*quirks*怪異模式或*strict*嚴格模式呈現| |[`contentType`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/contentType)|根據當前文檔的 MIME Header，返回它的 Content-Type| |[`fonts`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts)|返回當前文檔的[`FontFaceSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet)接口| |[`head`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/head)|返回當前文檔的 \<head\> 元素| |[`hidden`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden)|返回一個布爾值，表明當前頁面是否隱藏| |[`lastStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/lastStyleSheetSet)|返回最后啟用樣式表的名字。在設置selectedStyleSheetSet 前值都為 null| |[`plugins`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/plugins)|返回一個可用插件列表。| |[`preferredStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/preferredStyleSheetSet)|返回由頁面作者指定的首選樣式表集| |[`scripts`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scripts)|返回文檔中所有的 \<script\> 元素| |[`scrollingElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scrollingElement)|返回對文檔 Element 元素的引用| |[`selectedStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/selectedStyleSheetSet)|返回當前正使用的樣式表集。| |[`styleSheetSets`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/styleSheetSets)|返回文檔上可用樣式表的列表| |[`timeline`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/timeline)|返回?[`DocumentTimeline`](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentTimeline)的一個實例，該實例是在頁面加載時自動創建的| |[`visibilityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilityState)|返回?`string`?表明當前文檔的可見性。可能的取值有?`visible`,`hidden`,`prerender`, and`unloaded 。`| >[danger]注意Document是繼承與DOM節點對象的，而Document又是所有HTML文檔的根節點，很多屬性和方法在文檔中是沒有意義的列出如下 **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 | 文檔沒有文本節點 | **JS獲取DOM元素的方法（8種）** * 通過ID獲取（getElementById） * 通過name屬性（getElementsByName） * 通過標簽名（getElementsByTagName） * 通過類名（getElementsByClassName）【IE9+】 * 通過選擇器獲取一個元素（querySelector）【IE8+】 * 通過選擇器獲取一組元素（querySelectorAll）【IE8+】 * 獲取html標簽（document.documentElement） * 獲取body標簽（document.body） **獲取元素對象** ``` document.getElementById("myBtn") var y=x.getElementsByTagName("p"); var x=document.getElementsByClassName("intro"); document.getElementsByName("name屬性值"); document.querySelector('.animated') ``` **獲取元素的子節點** ``` /* 獲取元素節點 */ var e=document.getElementById("list"); /* 獲取該元素的子節點 */ var c=e.getElementsByTagName("li"); var c1=e.childNodes; //返回包含標簽屬性及文本節點，標簽與標簽之間的空格與換行也會被當作文本節點（IE8及以下除外） var c2 =e.children;//獲取所有子標簽 var c3=e.firstElementChild;//獲取當前元素第一個子標簽[IE9+] var c4=e.firstChild;//等于c1[0] var c5=e.lastChild; console.log(e); console.log(c); console.log(c1); console.log(c2); console.log(c3); console.log(c4); 更多參考節點對象 ``` **offsetParent**: 獲取當前元素的開啟了position定位的最近祖先元素，如果祖先元素沒有設置定位，那么返回的是body ``` <div id="box1"> <div id="box2" style="position: relative;"> <div id="box3"> <div id="box4"></div> </div> </div> </div> <script type="text/javascript"> var box4=document.getElementById("box4"); var box=box4.offsetParent; console.log(box);//返回box2節點對象 </script> ``` **創建元素：** ``` document.createElement("div") ``` ## 改變 HTML 內容 ``` document.getElementById("p1").innerHTML="新文本!"; ``` ## 改變 HTML 屬性 ``` document.getElementById("image").src="landscape.jpg"; ``` ## 改變 HTML 樣式 ``` document.getElementById(*id*).style.*property*\=*新樣式* 例子： document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; ```