Document 知识点记录

document对象是文档的根节点，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。

document对象有不同的办法可以获取。

正常的网页，直接使用document或window.document。
iframe框架里面的网页，使用iframe节点的contentDocument属性。
Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
内部节点的ownerDocument属性。
document对象继承了EventTarget接口、Node接口、ParentNode接口。这意味着，这些接口的方法都可以在document对象上调用。除此之外，document对象还有很多自己的属性和方法。

document对象主要有如下属性：

属性	说明
document.title	设置文档标题等价于HTML的
document.bgColor	设置页面背景色
document.linkColor	未点击过的链接颜色
document.alinkColor	激活链接(焦点在此链接上)的颜色
document.fgColor	设置前景色(文本颜色)
document.vlinkColor	已点击过的链接颜色
document.URL	设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate	文件建立日期，只读属性
document.fileModifiedDate	文件修改日期，只读属性
document.fileSize	文件大小，只读属性
document.cookie	设置和读出cookie
document.charset	设置字符集 简体中文:gb2312

指向特定元素集合的属性

属性	说明
document.all	文档中所有的元素，Firefox不支持该属性。
document.forms	所有的form元素。
document.images	所有的img元素。
document.links	所有的a元素。
document.scripts	所有的script元素。
document.styleSheets	所有的link或者style元素。

快捷方式属性
以下属性是指向文档内部的某个节点的快捷方式。

（1）document.defaultView

document.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象，该属性返回null。

document.defaultView === window // true

（2）document.doctype

对于 HTML 文档来说，document对象一般有两个子节点。第一个子节点是document.doctype，指向节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成。如果网页没有声明 DTD，该属性返回null。

var doctype = document.doctype;
doctype // “”
doctype.name // “html”

document.firstChild通常就返回这个节点。

（3）document.documentElement

document.documentElement属性返回当前文档的根节点（root）。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。HTML网页的该属性，一般是节点。

（4）document.body，document.head

document.body属性指向节点，document.head属性指向节点。

这两个属性总是存在的，如果网页源码里面省略了或，浏览器会自动创建。另外，这两个属性是可写的，如果改写它们的值，相当于移除所有子节点。

（5）document.scrollingElement

document.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。

标准模式下，这个属性返回的文档的根元素document.documentElement（即）。兼容（quirk）模式下，返回的是元素，如果该元素不存在，返回null。

// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;

（6）document.activeElement

document.activeElement属性返回获得当前焦点（focus）的 DOM 元素。通常，这个属性返回的是、、等表单元素，如果当前没有焦点元素，返回元素或null。

（7）document.fullscreenElement

document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态，该属性返回null。

if (document.fullscreenElement.nodeName == ‘VIDEO’) {
console.log(‘全屏播放视频’);
}

上面代码中，通过document.fullscreenElement可以知道元素有没有处在全屏状态，从而判断用户行为。

思维导图

https://www.douban.com/note/701640386/
https://segmentfault.com/a/1190000000660947