Document對象

Document對象

Document接口表示任何在瀏覽器中載入的網頁,並做爲網頁內容的入口,也就是DOM樹。DOM樹包含了像<body><div>這樣的元素,以及大量其餘元素。Document對象向網頁文檔自己提供了全局操做功能,接口描述了任何類型的文檔的通用屬性與方法,根據不一樣的文檔類型(例如HTMLXMLSVG...)可以使用更多API,此外使用text/html做爲內容類型content typeHTML文檔,還實現了HTMLDocument接口,而XMLSVG文檔則額外實現了XMLDocument接口。html

屬性

  • 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控制整個文檔是否可編輯,有效值爲onoff,根據規範,該屬性默認爲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只讀屬性,返回布爾值,表示頁面是truefalse隱藏。
  • 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 2Safari
  • 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
相關文章
相關標籤/搜索