首页 > 编程笔记 > JavaScript笔记 > JS DOM

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("*");