DOM模型中的Document节点

深入理解Document对象

最新推荐文章于 2024-04-19 08:49:22 发布

原创最新推荐文章于 2024-04-19 08:49:22 发布 · 664 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

前端同时被 3 个专栏收录

77 篇文章

订阅专栏

38 篇文章

订阅专栏

学习JavaScript

32 篇文章

订阅专栏

本文详细介绍了HTML文档中的Document对象，包括其属性与方法。重点讲解了document对象的节点集合属性、快捷方式属性、文档静态信息属性等内容，以及如何通过document对象进行页面元素的选择和创建。

本文根据javascript.ruanyifeng.com 整理笔记

document对象时文档的根节点, document对象是window对象的属性
document对象继承了EventTarget接口, Node接口, ParentNode接口

document的属性

快捷方式属性

document.defaultView 返回document对象所属的window对象, 若当前文档不属于window则返回null
一个html文件

<!DOCTYPE html>
<html>
<head></head>
<body><body>
</html>

document.doctype返回的是文档的<DOCTYPE>节点, 若html没有声明DTD, 则返回null
document.docueentElement 返回文档的根节点, 在 html中为<html>节点
document.body返回html的<body>节点, 属性可写
document.head返回html的<head>节点, 属性可写
document.scrollingElement属性返回文档中的滚动节点. 标准模式下返回文档的根节点document.documentElement, 兼容模式下返回document.body节点, 若不存在则返回null
document.activeElement返回获得当前焦点的节点. 通常为表单节点(如: <input>, <select>)若当前没有焦点节点则返回<body> 或null
document.fullscreenElement返回全屏状态的节点(如<video>的全屏), 若没有则返回null

节点集合属性

HTMLCollection实例是类似数组的对象(array-like Object). 若成员有id和name属性则实例也可以使用这两个属性
HTMLCollection实例表示文档内部特定元素的集合, 集合是动态的. 原节点有任何变化, 立刻会反映在集合中
document.links 返回当前文档所有设定href属性的<a>和<area>节点
document.forms属性返回所有<form>表单节点
document.images属性返回页面所有<img>图片节点
document.embeds和+ document.plugins属性返回所有<embed>节点
document.scripts属性返回所有的<script>节点
以上属性返回的是HTMLCollection实例, 可以通过instanceof属性判定
document.styleSheets返回文档内内嵌或引入的样式表集合. 但是返回的不是HTMLCollection

文档静态信息属性

document.documentURI和document.URL都返回一个字符串表示当前文档的网址. 但是documentURI继承自Document接口, 可用于所有文档, URL继承自HTMLDocument接口只能用于HTML文档. 文档中的锚点变化会反映在这两个属性中
document.domain返回当前文档的域名, 且不包含协议和接口
document.location返回浏览器的原生对象Location, 它提供URL相关的信息和操作方法. 还可以通过window.location得到这个对象
document.lastModified返回一个表示当前文档最后修改时间的字符串. 不同浏览器返回的日期格式不一定一样. 若页面上有JavaScript生成的内容则返回当前时间
document.title获取当前文档的标题, 默认返回<title>节点. 该属性可写
document.characterSet返回当前文档的编码
document.referrer返回一个表示当前文档的访问者来自哪里的字符串. 它和http头信息中的referer字段一致. 若无法获取访问者来源(如用户直接输入网址)则返回”“(空字符串)
document.dir返回表示文字方向的字符串, 有rlt表示文字从右到左, ltr文字从左到右
document.compatMode返回浏览器处理文档的模式, 有向后兼容模式BackCompat, 严格模式CSS1Compat. 一般网页有<DOCTYPE>声明则都为严格模式

文档状态属性

document.hidden返回布尔值表示当前页面是否可见, 若不可见则返回true. 窗口的最小化, 浏览器切换窗口都会导致页面不可见
document.visiblityState返回文档的可见状态. 它有四种可能:
visible：页面可见。注意，页面可能是部分可见，即不是焦点窗口，前面被其他窗口部分挡住了。
hidden：页面不可见，有可能窗口最小化，或者浏览器切换到了另一个 Tab。
prerender：页面处于正在渲染状态，对于用于来说，该页面不可见。
unloaded：页面从内存里面卸载了。
document.readyState返回当前文档的状态, 有三种值
loading：加载 HTML 代码阶段（尚未完成解析）
interactive：加载外部资源阶段
complete：加载完成
浏览器加载HTML文档过程如下:
1浏览器开始解析 HTML 文档，+ document.readyState属性等于loading。
2浏览器遇到 HTML 文档中的<script>元素，并且没有async或defer属性，就暂停解析，开始执行脚本，这时document.readyState属性还是等于loading。
3HTML 文档解析完成，document.readyState属性变成interactive。
4浏览器等待图片、样式表、字体文件等外部资源加载完成，一旦全部加载完成，document.readyState属性变成complete。

其他属性

document.cookie用来操作Cookie对象
document.designMode控制当前文档是否可编辑, 属性值为on或者off, 默认为off. 这个属性常用在所见即所得的编辑器
document.implementation返回一个DOMImplementation对象, 这个对象有三个方法
DOMImplementation.createDocument()：创建一个 XML 文档。
DOMImplementation.createHTMLDocument()：创建一个 HTML 文档。
DOMImplementation.createDocumentType()：创建一个 DocumentType 对象。

方法

document.open()方法清除当前文档的内容并使文档处于可写状态.
docuemnt.close()关闭open()方法打开的文档
document.write()向文档写入内容, 内容也会被当做html代码解析,但不会转义. 这个方法一定在open()和close()方法之间.
如果页面已经解析完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法
document.writeln()方法与write方法用法一致,不同的是这个方法在写入内容的末尾加上换行符. 可在显示上并不换行, 因为html会将连续的多个空格,换行符等解析为一个空格.
document.querySelector()接受一个css选择器作为参数, 返回满足条件的第一个节点, 没有返回null
document.querySelectorAll()也接受一个css选择器作为参数, 但是返回满足条件的所有节点, 返回值为NodeList对象
querySelector和querySelectorAll不支持伪元素选择器和伪类, 返回的结果不是动态集合
document.getElementsByTagName()接受标签名做参数返回满足条件的元素节点, 返回值是HTMLCollection实例, 实时反映文档节点变化, 可以在任意元素节点调用
document.getElementsByClassName()接受类名做参数返回满足条件的元素节点, 返回值也是
HTMLCollection实例,实时反映文档节点变化, 可以在任意元素节点调用
document.getElementsByName() 接受的参数是一个属性名, 返回拥有这个属性名的元素节点, 注意返回值是NodeList实例, 因为属性名相同的元素可能不止一个
document.getElementById() 接受一个id参数,返回这个id所在的元素, 这是个单个节点. 注意这个方法只能在document对象上使用, 其他元素节点不可用
document.elementFromPoint方法接受连个参数x, y. 返回位于页面指定位置最上层的元素
document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素节点。
document.caretPositionFromPoint()返回一个CaretPosition对象, 用于确定光标点在文本对象内部的具体位置, 它有两个属性
CaretPosition.offsetNode：该位置的节点对象
CaretPosition.offset：该位置在offsetNode对象内部，与起始位置相距的字符数
document.createElement()方法用来生成元素节点，并返回该节点. 参数为标签名, 不可以有尖括号
document.createTextNode()用于生成文本节点并返回该节点, 参数为文本节点的内容. 该方法不对单双引号转义
document.createAttribute()生成新的属性节点并返回, 参数为属性名
document.createComment()用于生成注释节点并返回
document.createDocumentFragment()生成一个空的文档片段对象, 即DocumentFragment实例, 它不属于当前文档
document.createEvent()方法用于生成一个Event实例
document.addEventListener()用于添加时间监听函数
document.removeEventListener()移除事件监听函数
document.dispatchEvent()用于触发事件
document.hasFocus()返回一个表示当前文档中是否有元素激活或者获得焦点的布尔值. 若有元素被激活或者获得焦点则返回true. 注意有焦点的文档必定被激活, 激活的文档未必有焦点
document.adoptNode()，document.importNode()都用于移动节点
document.createNodeIterator()方法返回一个子节点遍历器, 它是NodeFilter实例。document.createNodeIterator()方法第一个参数为所要遍历的根节点，第二个参数为所要遍历的节点类型，这里指定为元素节点（NodeFilter.SHOW_ELEMENT）
几种主要的节点类型写法如下
所有节点：NodeFilter.SHOW_ALL
元素节点：NodeFilter.SHOW_ELEMENT
文本节点：NodeFilter.SHOW_TEXT
评论节点：NodeFilter.SHOW_COMMENT
document.createTreeWalker方法返回一个 DOM 的子树遍历器, 但它时TreeWalker实例. 使用方法和createNodeIterator()类似
document.getSelection()指向window.getSelection()方法

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。