Document对象

Document接口表示任何在浏览器中载入的网页,并作为网页内容的入口,也就是DOM树。DOM树包含了像<body><div>这样的元素,以及大量其他元素。Document对象向网页文档本身提供了全局操作功能,接口描述了任何类型的文档的通用属性与方法,根据不同的文档类型(例如HTMLXMLSVG...)能够使用更多API,此外使用text/html作为内容类型content typeHTML文档,还实现了HTMLDocument接口,而XMLSVG文档则额外实现了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控制整个文档是否可编辑,有效值为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