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