JS document（文档节点）详解
文档节点代表整个 HTML 文档，在 JavaScript 中使用 document 即可访问。document 也叫“根节点”，它是文档内其他节点的访问入口，提供了操作其他节点的方法。主要特征值：nodeType 等于 9、nodeName 等于 "#document"、nodeValue 等于 null、parentNode 等于 null、ownerDocument 等于 null。
在 HTML 文档中，文档节点是唯一的，也是只读的。
访问文档
在不同环境中，获取文档节点的迭代不同。具体说明如下：
- 在文档内部节点，使用 ownerDocument 访问。
- 在脚本中，使用 document 访问。
- 在框架页，使用 contentDocument 访问。
- 在异步通信中，使用 XMLHttpRequest 对象的 responseXML 访问。
访问子节点
文档子节点包括以下类型：
- doctype 文档类型，如 <!doctype html>。
- html 元素，如 <html>。
- 处理指令，如 <?xml-stylesheet type="text/xsl" href="xsl.xsl"?>。
- 注释，如 <!--注释-->
访问方法说明如下：
- 使用 document.documentElement 可以访问 html 元素。
- 使用 document.doctype 可以访问 doctype。注意，部分浏览器不支持。
- 使用 document.childNodes 可以遍历子节点。
- 使用 document.firstChild 可以访问第一个子节点，一般为 doctype。
- 使用 document.lastChild 可以访问最后一个子节点，如 html 元素或者注释。
访问特殊元素
文档中存在很多特殊元素，使用下面的方法可以获取，若获取不到则返回 null。
- 使用 document.body 可以访问 body 元素。
- 使用 document.head 可以访问 head 元素。
- 使用 document.defaultView 可以访问默认视图，即所属的窗口对象 window。
- 使用 document.scrollingElement 可以访问文档内滚动的元素。
- 使用 document.activeElement 可以访问文档内获取焦点的元素。
- 使用 document.fullscreenElement 可以访问文档内正在全屏显示的元素。
访问元素集合
document 包含一组集合对象，使用它们可以快速访问文档内元素，简单说明如下：
- document.anchors：返回所有设置 name 属性的 <a> 标签。
- document.links：返回所有设置 href 属性的 <a> 标签。
- document.forms：返回所有 form 对象。
- document.images：返回所有 image 对象。
- document.applets：返回所有 applet 对象。
- document.embeds：返回所有 embed 对象。
- document.plugins：返回所有 plugin 对象。
- document.scripts：返回所有 script 对象。
- document.styleSheets：返回所有样式表集合。
访问文档信息
document 包含很多信息，简单说明如下：
静态信息
- document.URL：返回当前文档的网址。
- document.domain：返回当前文档的域名，不包含协议和接口。
- document.location：访问 location 对象。
- document.lastModified：返回当前文档最后修改的时间。
- document.title：返回当前文档的标题。
- document.characterSet：返回当前文档的编码。
- document.referrer：返回当前文档的访问者来自哪里。
- document.dir：返回文字方向。
- document.compatMode：返回浏览器处理文档的模式，值包括 BackCompat（向后兼容模式）和 CSS1Compat（严格模式）。
状态信息
- document.hidden：表示当前页面是否可见。如果窗口最小化、切换页面，则 document.hidden 返回 true。
- document.visibilityState：返回文档的可见状态。取值包括：visible（可见）、hidden（不可见）、prerender（正在渲染）、unloaded（已卸载）。
- document.readyState：返回当前文档的状态。取值包括：loading（正在加载）、interactive（加载外部资源）、complete（加载完成）。
访问文档元素
document 对象包含多个访问文档内元素的方法，简单说明如下：
- getElementById()：返回指定 id 属性值的元素。注意，id 值要区分大小写。如果找到多个 id 相同的元素，则返回第一个元素；如果没有找到指定 id 值得元素，则返回 null。
- getElementsByTagName()：返回所有指定标签名称的元素节点。
- getElementsByName()：返回所有指定名称（name 属性值）的元素节点。该方法多用于表单结构中，获取单选按钮组或复选框组。
getElementsByName() 方法返回的是一个 HTMLCollection 对象，与 nodeList 对象类似，可以使用方括号语法或者 item() 方法访问 HTMLCollection 对象中的元素，并通过 length 属性取得这个对象中元素的数量。
示例
HTMLCollection 对象还包含一个 namedItem() 方法，该方法可以通过元素的 name 特征取得集合中的项目。下面示例可以通过 namedItem("news"); 方法找到 HTMLCollection 对象中 name 为 news 的图片。
<img src="1.gif" />
<img src="2.gif" name="news" />
<script>
var images = document.getElementsByTagName("img");
var news = image.namedItem("news");
</script>
还可以使用下面用法获取页面中所有元素，其中参数*表示所有元素。
var allElements = document.getElementsByTagName("*");
本文标题：JS document（文档节点）详解
发表评论