Document物件

WindrunnerMax發表於2020-11-29
物件

Document物件

Document介面表示任何在瀏覽器中載入的網頁，並作為網頁內容的入口，也就是DOM樹。DOM樹包含了像<body>、<div>這樣的元素，以及大量其他元素。Document物件向網頁文件本身提供了全域性操作功能，介面描述了任何型別的文件的通用屬性與方法，根據不同的文件型別(例如HTML、XML、SVG、...)能夠使用更多API，此外使用text/html作為內容型別content type的HTML文件，還實現了HTMLDocument介面，而XML和SVG文件則額外實現了XMLDocument介面。

屬性

  • Document(): Document構造器建立一個新的Document物件，該物件是在瀏覽器中載入的頁面，並作為頁面內容的入口點。
  • document.body: 返回當前文件中的<body>元素或者<frameset>元素。
  • document.characterSet: document.characterSet只讀屬性，返回當前文件的字元編碼，該字元編碼是用於渲染此文件的字符集，可能與該頁面指定的編碼不同。
  • document.childElementCount: ParentNode.childElementCount只讀屬性，返回一個無符號長整型數字，表示給定元素的子元素數。
  • document.children: 只讀屬性，返回一個Node的子elements，是一個動態更新的HTMLCollection。
  • document.compatMode: 表明當前文件的渲染模式是怪異模式/混雜模式還是標準模式。
  • document.contentType: 只讀屬性，返回當前文件的Content-Type(MIME)型別。
  • document.currentScript: document.currentScript屬性返回當前正在執行的指令碼所屬的<script>元素，呼叫此屬性的指令碼不能是JavaScript模組，模組應當使用import.meta物件。
  • document.defaultView: 在瀏覽器中，該屬性返回當前document物件所關聯的window物件，如果沒有則會返回null。
  • document.designMode: document.designMode控制整個文件是否可編輯，有效值為on和off，根據規範，該屬性預設為off，通常用在<iframe>中。
  • document.dir: document.dir的本質是DOMString，代表了文件的文字朝向，是從左到右ltr(預設)還是從右到左rtl，並可以設定文字的朝向。
  • document.doctype: 返回當前文件關聯的文件型別定義DTD，返回的物件實現了DocumentType介面，使用DOMImplementation.createDocumentType()方法可以建立一個DocumentType型別的物件。
  • document.documentElement: document.documentElement是一個會返回文件物件document的根元素的只讀屬性，例如HTML文件的<html>元素。
  • document.documentURI: Document介面的屬性documentURI以字串的形式返回文件的位置location，在最初的DOM3定義中，這個屬性是可讀/寫的，在現代的DOM標準DOM4中，它是隻讀的。
  • document.domain: Document介面的domain屬性獲取/設定當前文件的原始域部分，常用於同源策略，如果成功設定此屬性，則原始埠的埠部分也將設定為null。
  • document.embeds: Document介面的embeds只讀屬性返回當前文件中嵌入的<object>元素的列表。
  • document.firstElementChild: 只讀屬性，返回物件的第一個子元素,如果沒有子元素，則為null。
  • document.forms: document.forms返回當前文件中的<form>元素的一個集合，是一個HTMLCollection。
  • document.mozFullScreenEnabled: 返回一個布林值，表明瀏覽器是否支援全屏模式，全屏模式只在那些不包含視窗化的外掛的頁面中可用，對於一個<iframe>元素中的頁面，則它必需擁有mozallowfullscreen屬性。
  • document.head: 返回當前文件中的<head>元素，如果有多個<head>元素，則返回第一個。
  • document.hidden: document.hidden只讀屬性，返回布林值，表示頁面是true否false隱藏。
  • document.images: 只讀屬性，返回當前文件中所有image元素的集合。
  • document.implementation: 返回一個和當前文件相關聯的DOMImplementation物件。
  • lastElementChild: 只讀屬性，返回物件的最後一個孩子Element，如果沒有子元素，則返回null。
  • document.lastModified: 返回一個字串，其中包含了當前文件的最後修改日期和時間。
  • document.links: document.links屬性返回一個文件中所有具有href屬性值的<area>元素與<a>元素的集合。
  • document.location: 返回一個Location物件，包含有文件的URL相關的資訊，並提供了改變該URL和載入其他URL的方法。
  • document.onbeforeunload: 該事件在即將離開頁面（重新整理或關閉）時觸發。
  • document.onload: 文件載入完成後觸發。
  • document.onreadystatechange: 當文件的readyState屬性發生改變時，會觸發readystatechange事件。
  • document.onvisibilitychange: 將在該物件的visibilitychange事件被觸發時呼叫。
  • document.onunload: 當視窗解除安裝其內容和資源時觸發。
  • document.onerror: 當發生JavaScript執行時錯誤與資源載入失敗時觸發。
  • document.onabort: 傳送到window的中止abort事件的事件處理程式，不適用於Firefox 2或Safari。
  • document.onblur: 視窗失去焦點時觸發。
  • document.onfocus: 視窗獲得焦點時觸發。
  • document.onresize: 視窗大小發生改變時觸發。
  • document.onscroll: 視窗發生滾動時觸發。
  • document.onmessage: 視窗物件接收訊息事件時觸發。
  • document.onchange: 視窗內表單元素的內容改變時觸發。
  • document.oninput: 視窗內表單元素獲取使用者輸入時觸發。
  • document.onreset: 視窗內表單重置時觸發。
  • document.onselect: 視窗內表單元素中文字被選中時觸發。
  • document.onsubmit: 視窗內表單中submit按鈕被按下觸發。
  • document.onhashchange: 當視窗的錨點雜湊值發生變化時觸發。
  • document.onclick: 當點選頁面時觸發。
  • document.onmouseup: 滑鼠按鍵被鬆開時觸發。
  • document.ondblclick: 當雙擊頁面時呼叫事件控制程式碼。
  • document.oncontextmenu: 在點選滑鼠右鍵開啟上下文選單時觸發。
  • document.onmousedown: 滑鼠按鈕被按下時觸發。
  • document.onmousemove: 當移動滑鼠時觸發。
  • document.onmouseout: 滑鼠移出視窗時觸發。
  • document.onmouseover: 滑鼠移動到視窗時觸發。
  • document.onauxclick: 指示在輸入裝置上按下非主按鈕時觸發，例如滑鼠中鍵。
  • document.onkeydown: 某個鍵盤按鍵被按下時觸發。
  • document.onkeyup: 某個鍵盤按鍵被鬆開後觸發。
  • document.onkeypress: 某個鍵盤按鍵被按下並鬆開後觸發。
  • document.onanimationcancel: 當CSS動畫意外中止時，即在任何時候它停止執行而不傳送animationend事件時將傳送此事件，例如當animation-name被改變，動畫被刪除等
  • document.onanimationend: 當CSS動畫到達其活動週期的末尾時，按照(animation-duration*animation-iteration-count) + animation-delay進行計算，將傳送此事件。
  • document.onanimationiteration: 此事件將會在CSS動畫到達每次迭代結束時觸發，當通過執行最後一個動畫步驟完成對動畫指令序列的單次傳遞完成時，迭代結束。
  • document.ondevicemotion: 裝置狀態發生改變時觸發
  • document.ondeviceorientation: 裝置相對方向發生改變時觸發
  • document.ondeviceproximity: 當裝置感測器檢測到物體變得更接近或更遠離裝置時觸發。
  • document.onbeforeprint: 該事件在頁面即將開始列印時觸發
  • document.onafterprint: 該事件在頁面已經開始列印或者列印視窗已經關閉時觸發。
  • document.onappinstalled: 一旦將Web應用程式成功安裝為漸進式Web應用程式，該事件就會被分派。
  • document.onbeforeinstallprompt: 當使用者即將被提示安裝web應用程式時，該處理程式將在裝置上排程，其相關聯的事件可以儲存以供稍後用於在更適合的時間提示使用者。
  • document.plugins: 只讀屬性返回一個HTMLCollection物件，該物件包含一個或多個HTMLEmbedElements，表示當前文件中的<embed>元素。
  • document.readyState: document.readyState屬性描述document的載入狀態。當該屬性值發生變化時，會在document物件上觸發readystatechange事件。
  • document.referrer: 返回一個URI,當前頁面就是從這個URI所代表的頁面跳轉或開啟的。
  • document.scripts: 返回一個HTMLCollection物件，包含了當前文件中所有<script>元素的集合。
  • document.scrollingElement: 只讀屬性，返回滾動文件的Element物件的引用，在標準模式下，返回文件的根元素，當在怪異模式下， 返回HTML body元素，若不存在返回null。
  • document.selectedStyleSheetSet: 返回當前使用的樣式表集合的名稱，你也可以使用這個屬性設定當前樣式表集。
  • document.styleSheetSets: 返回一個所有當前可用樣式表集的實時列表。
  • document.title: 獲取或設定文件的標題。
  • document.URL: 返回當前文件的URL地址。
  • document.visibilityState: 只讀屬性，返回document的可見性，即當前可見元素的上下文環境，由此可以知道當前文件(即為頁面)是在背後, 或是不可見的隱藏的標籤頁，或者正在預渲染，可選值有visible可見(至少是部分可見)、hidden不可見、prerender預渲染。

方法

  • document.adoptNode(externalNode): 從其他的document文件中獲取一個節點，該節點以及它的子樹上的所有節點都會從原文件刪除(如果有這個節點的話)，並且它的ownerDocument屬性會變成當前的document文件，之後你可以把這個節點插入到當前文件中。
  • document.close(): document.close()用於結束由對文件的document.write()寫入操作，這種寫入操作一般由document.open()開啟。
  • document.createAttribute(name): document.createAttribute()方法建立並返回一個新的屬性節點，這個物件建立一個實現了Attr介面的節點，這個方式下DOM不限制節點能夠新增的屬性種類。
  • document.createCDATASection(data): 建立並返回一個新的CDATA片段節點。
  • document.createComment(data): 建立並返回一個註釋節點，data是一個字串，包含了註釋的內容。
  • document.createDocumentFragment(): 建立一個新的空白的文件片段DocumentFragment。
  • document.createElement(tagName[, options]): 在HTML文件中，document.createElement()方法用於建立一個由標籤名稱tagName指定的HTML元素。如果使用者代理無法識別tagName，則會生成一個未知HTML元素HTMLUnknownElement。
  • document.createElementNS(namespaceURI, qualifiedName[, options]): 建立一個具有指定的名稱空間URI和限定名稱的元素，要建立一個元素而不指定名稱空間URI，請使用createElement方法。
  • document.createEvent(type): 建立一個指定型別的事件，其返回的物件必須先初始化並可以被傳遞給element.dispatchEvent。
  • document.createExpression(xpathText, namespaceURLMapper): 該方法將編譯生成一個 XPathExpression，可以用來多次的執行。
  • document.createNodeIterator(root[, whatToShow[, filter]]): 返回一個新的NodeIterator物件。
  • document.createNSResolver(node): 建立一個XPathNSResolver，它根據指定節點範圍內的定義解析名稱空間。
  • document.createProcessingInstruction(target, data): 建立一個新的處理指令節點，並返回。
  • document.createRange(): 返回一個Range物件。
  • document.createTextNode(data): 建立一個新的文字節點，這個方法可以用來轉義HTML字元。
  • document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion): 建立並返回一個TreeWalker物件。
  • document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result): 根據傳入的XPath表示式以及其他引數，返回一個XPathResult物件。
  • document.exitFullscreen(): 用於讓當前文件退出全屏模式，呼叫這個方法會讓文件回退到上一個呼叫Element.requestFullscreen()方法進入全屏模式之前的狀態。
  • document.getElementById(id): 返回一個匹配特定ID的元素，由於元素的ID在大部分情況下要求是獨一無二的，這個方法自然而然地成為了一個高效查詢特定元素的方法。
  • document.getElementsByClassName(names): 返回一個包含了所有指定類名的子元素的類陣列物件，當在document物件上呼叫時，會搜尋整個DOM文件，包含根節點。你也可以在任意元素上呼叫getElementsByClassName()方法，它將返回的是以當前元素為根節點，所有指定類名的子元素。
  • document.getElementsByName(name): 根據給定的name返回一個在(X)HTML document的節點列表集合。
  • document.getElementsByTagName(name): 返回一個包括所有給定標籤名稱的元素的HTML集合HTMLCollection，整個檔案結構都會被搜尋，包括根節點。返回的HTML集合是動態的，意味著它可以自動更新自己來保持和DOM樹的同步而不用再次呼叫document.getElementsByTagName()。
  • document.getElementsByTagNameNS(namespace, name): 返回帶有指定名稱和名稱空間的元素集合，整個檔案結構都會被搜尋，包括根節點。
  • document.hasFocus(): 返回一個Boolean，表明當前文件或者當前文件內的節點是否獲得了焦點，該方法可以用來判斷當前文件中的活動元素是否獲得了焦點。
  • document.hasStorageAccess(): 返回了一個Promise來判斷該文件是否有訪問第一方儲存的許可權。
  • document.importNode(externalNode, deep): 將外部文件的一個節點拷貝一份，然後可以把這個拷貝的節點插入到當前文件中。
  • document.open(): 開啟一個要寫入的文件，這將會有一些連帶的影響，例如此時已註冊到文件、文件中的節點或文件的window的所有事件監聽器會被清除，文件中的所有節點會被清除。
  • prepend((Node or DOMString)... nodes): 可以在父節點的第一個子節點之前插入一系列Node物件或者DOMString物件。
  • document.queryCommandEnabled(command): 可查詢瀏覽器中指定的編輯指令是否可用。
  • document.queryCommandSupported(command): 確定瀏覽器是否支援指定的編輯指令。
  • document.querySelector(selectors): 表示文件中與指定的一組CSS選擇器匹配的第一個元素，是一個HTMLElement物件，如果沒有匹配到，則返回null。匹配是使用深度優先先序遍歷，從文件標記中的第一個元素開始，並按子節點的順序依次遍歷。
  • document.querySelectorAll(selectors): 返回一個靜態NodeList，包含一個與至少一個指定CSS選擇器匹配的元素的Element物件，或者在沒有匹配的情況下為空NodeList。
  • document.releaseCapture(): 如果該document中的一個元素之上當前啟用了滑鼠捕獲，則釋放滑鼠捕獲，通過呼叫element.setCapture()實現在一個元素上啟用滑鼠捕獲。
  • document.write(markup): document.write()方法將一個文字字串寫入一個由document.open()開啟的文件流，因為document.write需要向文件流中寫入內容，所以若在一個已關閉(例如已完成載入)的文件上呼叫document.write，就會自動呼叫document.open，這將清空該文件的內容。
  • document.writeln(line): 向文件中寫入一串文字，並緊跟著一個換行符。

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://developer.mozilla.org/zh-CN/docs/Web/API/Document

相關文章