documnt
节点对象代表整个文档,每张网页都有自己的document
对象。window.document
属性就是指向这个对象。
document
对象获取方法:
- 正常网页。使用
document
或window.document
iframe
框架里面的页面,使用iframe
节点的contentDocument
属性。- Ajax 操作返回的文档,使用
XMLHttpRequest
对象的responseXML
属性 - 内部节点的
ownerDocument
属性
属性
快捷方式属性
document.defaultView
返回window
对象,如果文档不属于window
,则返回null
document.doctype
返回文档类型document.documentElement
返回当前文档根节点。一般是html
document.body
,document.head
属性分别指向<body>
节点,<head>
节点document.scrollingElement
返回文档的滚动元素。标准模式下,返回<html>
。兼容(quirk)模式下,返回的是<body>
元素,如果该元素不存在,返回null。
// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;
复制代码
document.activeElement
返回当前焦点元素。如果当前没有焦点元素,返回<body>
元素或null
。document.fullscreenElement
属性返回当前以全屏状态显示的 DOM 元素。如果不是全屏状态,该属性返回null。
if (document.fullscreenElement.nodeName == 'VIDEO') {
console.log('全屏播放视频');
}
复制代码
节点集合属性
document.links
属性返回当前文档所有设定了href
属性的<a>
,节点document.forms
返回所有<form
表单节点document.images
返回所有<img>
图片节点document.embeds
属性和document.plugins
属性,都返回所有<embed>
节点。document.scripts
属性返回所有<script>
节点。document.styleSheets
属性返回文档内嵌或引入的样式表集合- 除了
document.styleSheets
,以上的集合属性返回的都是HTMLCollection
实例。
文档静态信息属性
document.documentURI
,document.documentURL
返回当前文档的网址。document.domain
返回当前文档的域名。document.location
对象提供 URL 相关的信息和操作方法。document.lastModified
属性返回一个字符串,表示当前文档最后修改的时间。document.title
返回当前文档的标题。document.characterSet
属性返回当前文档的编码
文档状态属性
-
document.hidden
返回布尔值,如果窗口最小化、浏览器切换了 Tab,都会导致导致页面不可见,使得document.hidden
返回true
。 -
document.visibliteState
返回文档的可见状态,这个属性可以用在页面加载时,防止加载某些资源;或者页面不可见时,停掉一些页面功能。有四个值:visible
页面可见,又可能是部分可见。hidden
页面不可见,窗口最小化或者浏览器切换到另一个 Tab。prerender
页面处于渲染状态unload
页面从内存里卸载了
-
document.readyState
返回当前文档的状态,有三个值:loading
加载 HTML 代码阶段interactive
加载外部资源阶段complete
加载完成
-
document.cookie
用来操作浏览器 Cookie -
document.designMode
用来控制文档是否可编辑,有两个值on
和off
。 -
document.implementation
属性返回一个DOMImplementation
对象,该对象有三个方法,用于创建独立于当前文档的新的 Document 对象。DOMImplementation.createDocument()
:创建一个 XML 文档。DOMImplementation.createHTMLDocument()
:创建一个 HTML 文档。DOMImplementation.createDocumentType()
:创建一个 DocumentType 对象。
方法
document.open()
清除当前文档所有内容,是文档处于可写状态,使用document.write()
方法写入内容。document.close()
关闭document.open()
打开的文档document.writeIn()
与write
方法完全一致,除了会在输入内容的尾部添加换行符。document.querySeletor()
接收一个 CSS 选择器为参数,返回匹配该选择器的元素节点,如果多个节点满足条件,则返回第一个匹配的节点。不支持 css 伪类选择器document.querySeletorAll()
与上面方法类似,区别是返回要给NodeList
对象,包含所有匹配给定选择器的节点。不支持 css 伪类选择器document.getElementsByTagName()
搜索 HTML 标签名document.getElementsByClassName()
通过类名搜索document.getElementsByName()
用于选择拥有name
属性的 HTML 元素。document.getElementById()
返回指定id
属性的元素节点document.elementFromPoint()
返回位于页面指定位置最上层的元素节点,有两个参数,依次是相对于视口左上角的横坐标和纵坐标,单位是像素。document.elementsFromPoint()
返回一个数组,成员是位于指定坐标(相对于视口)的所有元素。document.caretPositionFromPoint()
返回一个 CaretPositon 对象,包含了指定坐标点在节点对象内部的位置信息。CaretPosition 对象就是光标插入点的概念,用于确定光标点在文本对象内部的具体位置。document.createElement()
生成元素节点document.createTextNode()
生产文本节点,并返回该节点。document.createAttribute()
生产一个新的属性节点,并返回他。document.createComment()
生成一个新的注释节点,并返回该节点。document.createDocumentFragment()
生成一个空的文档片段对象。document.createEvent()
生成一个事件对象,该对象可以被element.dispatchEvent
方法使用,触发指定事件。
document.createEvent
方法的参数是事件类型,比如UIEvents
、MouseEvents
、MutationEvents
、HTMLEvents
。
var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (e) {
console.log(e.type); // "build"
}, false);
document.dispatchEvent(event);
//上面代码新建了一个名为build的事件实例,然后触发该事件。
复制代码
document.addEventListener()
,document.removeEventListener()
,document.dispatchEvent()
// 添加事件监听函数
document.addEventListener('click', listener, false);
// 移除事件监听函数
document.removeEventListener('click', listener, false);
// 触发事件
var event = new Event('click');
document.dispatchEvent(event);
复制代码
document.hasFocus()
返回一个布尔值,表示当前文档之中是否铀元素被激活或获得焦点。document.adoptNode()
将某个节点及其子节点,从原来所在的文档里面移除,归属当前document
对象,返回插入口的新节点。
var node = document.adoptNode(externalNode);
document.appendChild(node);
复制代码
注意,document.adoptNode
方法只是改变了节点的归属,并没有将这个节点插入新的文档树。所以,还要再用appendChild
方法或insertBefore
方法,将新节点插入当前文档树。
document.importNode()
方法则是从原来所在的文档或DocumentFragment里面,拷贝某个节点及其子节点,让它们归属当前document对象
var node = document.importNode(externalNode, deep);
复制代码
document.importNode
方法的第一个参数是外部节点,第二个参数是一个布尔值,表示对外部节点是深拷贝还是浅拷贝,默认是浅拷贝(false)。虽然第二个参数是可选的,但是建议总是保留这个参数,并设为true
。