爱站程序员基地HTML DOM Document 对象
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
**提示：**Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象集合
| 集合 | 描述 |
|---|---|
| [all] | 提供对文档中所有 HTML 元素的访问。 |
| [anchors] | 返回对文档中所有 Anchor 对象的引用。 |
| applets | 返回对文档中所有 Applet 对象的引用。 |
| [forms] | 返回对文档中所有 Form 对象引用。 |
| [images] | 返回对文档中所有 Image 对象引用。 |
| [links] | 返回对文档中所有 Area 和 Link 对象引用。 |
Document 对象属性
| 属性 | 描述 |
|---|---|
| body | 提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。 |
| cookie | 设置或返回与当前文档有关的所有 cookie。 |
| domain | 返回当前文档的域名。 |
| lastModified | 返回文档被最后修改的日期和时间。 |
| referrer | 返回载入当前文档的文档的 URL。 |
| title | 返回当前文档的标题。 |
| URL | 返回当前文档的 URL。 |
Document 对象方法
| 方法 | 描述 |
|---|---|
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName()所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById()的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
HTML DOM Element 对象
HTML DOM 节点
在 HTML DOM （文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
Element 对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点（参见下一节）。
属性和方法
下面的属性和方法可用于所有 HTML 元素上：
| 属性 / 方法 | 描述 |
|---|---|
| element.accessKey | 设置或返回元素的快捷键。 |
| element.appendChild() | 向元素添加新的子节点，作为最后一个子节点。 |
| element.attributes | 返回元素属性的 NamedNodeMap。 |
| element.childNodes | 返回元素子节点的 NodeList。 |
| element.className | 设置或返回元素的 class 属性。 |
| element.clientHeight | 返回元素的可见高度。 |
| element.clientWidth | 返回元素的可见宽度。 |
| element.cloneNode() | 克隆元素。 |
| element.compareDocumentPosition() | 比较两个元素的文档位置。 |
| element.contentEditable | 设置或返回元素的文本方向。 |
| element.dir | 设置或返回元素的内容是否可编辑。 |
| element.firstChild | 返回元素的首个子。 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.getAttributeNode() | 返回指定的属性节点。 |
| element.getElementsByTagName() | 返回拥有指定标签名的所有子元素的集合。 |
| element.getFeature() | 返回实现了指定特性的 API 的某个对象。 |
| element.getUserData() | 返回关联元素上键的对象。 |
| element.hasAttribute() | 如果元素拥有指定属性，则返回true，否则返回 false。 |
| element.hasAttributes() | 如果元素拥有属性，则返回 true，否则返回 false。 |
| element.hasChildNodes() | 如果元素拥有子节点，则返回 true，否则 false。 |
| element.id | 设置或返回元素的 id。 |
| element.innerHTML | 设置或返回元素的内容。 |
| element.insertBefore() | 在指定的已有的子节点之前插入新节点。 |
| element.isContentEditable | 设置或返回元素的内容。 |
| element.isDefaultNamespace() | 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。 |
| element.isEqualNode() | 检查两个元素是否相等。 |
| element.isSameNode() | 检查两个元素是否是相同的节点。 |
| element.isSupported() | 如果元素支持指定特性，则返回 true。 |
| element.lang | 设置或返回元素的语言代码。 |
| element.lastChild | 返回元素的最后一个子元素。 |
| element.namespaceURI | 返回元素的 namespace URI。 |
| element.nextSibling | 返回位于相同节点树层级的下一个节点。 |
| element.nodeName | 返回元素的名称。 |
| element.nodeType | 返回元素的节点类型。 |
| element.nodeValue | 设置或返回元素值。 |
| element.normalize() | 合并元素中相邻的文本节点，并移除空的文本节点。 |
| element.offsetHeight | 返回元素的高度。 |
| element.offsetWidth | 返回元素的宽度。 |
| element.offsetLeft | 返回元素的水平偏移位置。 |
| element.offsetParent | 返回元素的偏移容器。 |
| element.offsetTop | 返回元素的垂直偏移位置。 |
| element.ownerDocument | 返回元素的根元素（文档对象）。 |
| element.parentNode | 返回元素的父节点。 |
| element.previousSibling | 返回位于相同节点树层级的前一个元素。 |
| element.removeAttribute() | 从元素中移除指定属性。 |
| element.removeAttributeNode() | 移除指定的属性节点，并返回被移除的节点。 |
| element.removeChild() | 从元素中移除子节点。 |
| element.replaceChild() | 替换元素中的子节点。 |
| element.scrollHeight | 返回元素的整体高度。 |
| element.scrollLeft | 返回元素左边缘与视图之间的距离。 |
| element.scrollTop | 返回元素上边缘与视图之间的距离。 |
| element.scrollWidth | 返回元素的整体宽度。 |
| element.setAttribute() | 把指定属性设置或更改为指定值。 |
| element.setAttributeNode() | 设置或更改指定属性节点。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 把对象关联到元素上的键。 |
| element.style | 设置或返回元素的 style 属性。 |
| element.tabIndex | 设置或返回元素的 tab 键控制次序。 |
| element.tagName | 返回元素的标签名。 |
| element.textContent | 设置或返回节点及其后代的文本内容。 |
| element.title | 设置或返回元素的 title 属性。 |
| element.toString() | 把元素转换为字符串。 |
| nodelist.item() | 返回 NodeList 中位于指定下标的节点。 |
| nodelist.length | 返回 NodeList 中的节点数。 |
HTML DOM Attribute 对象
HTML DOM 节点
在 HTML DOM （文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
Attr 对象
在 HTML DOM 中，Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
NamedNodeMap 对象
在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引（数字）来访问。
属性和方法
| 属性 / 方法 | 描述 |
|---|---|
| attr.isId | 如果属性是 id 类型，则返回 true，否则返回 false。 |
| attr.name | 返回属性的名称。 |
| attr.value | 设置或返回属性的值。 |
| attr.specified | 如果已指定属性，则返回 true，否则返回 false。 |
| nodemap.getNamedItem() | 从 NamedNodeMap 返回指定的属性节点。 |
| nodemap.item() | 返回 NamedNodeMap 中位于指定下标的节点。 |
| nodemap.length | 返回 NamedNodeMap 中的节点数。 |
| nodemap.removeNamedItem() | 移除指定的属性节点。 |
| nodemap.setNamedItem() | 设置指定的属性节点（通过名称）。 |
DOM 4 警告！
在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。
在 DOM 4 中，Attr 对象不再从 Node 继承。
为了保证未来的代码安全，您应该避免在属性对象上使用节点对象的属性和方法：
| 属性 / 方法 | 避免的理由 |
|---|---|
| attr.appendChild() | 属性没有子节点。 |
| attr.attributes | 属性没有属性。 |
| attr.baseURI | 使用 document.baseURI 代替。 |
| attr.childNodes | 属性没有子节点。 |
| attr.cloneNode() | 使用 attr.value 代替。 |
| attr.firstChild | 属性没有子节点。 |
| attr.hasAttributes() | 属性没有属性。 |
| attr.hasChildNodes | 属性没有子节点。 |
| attr.insertBefore() | 属性没有子节点。 |
| attr.isEqualNode() | 没有意义。 |
| attr.isSameNode() | 没有意义。 |
| attr.isSupported() | 始终为 true。 |
| attr.lastChild | 属性没有子节点。 |
| attr.nextSibling | 属性没有同级节点。 |
| attr.nodeName | 使用 attr.name 代替。 |
| attr.nodeType | 始终为 2 (ATTRIBUTE_NODE)。 |
| attr.nodeValue | 使用 attr.value 代替。 |
| attr.normalize() | 属性无法被正常化。 |
| attr.ownerDocument | 始终是您的 HTML 文档。 |
| attr.ownerElement | 这是您用来访问该属性的 HTML 元素。 |
| attr.parentNode | 这是您用来访问该属性的 HTML 元素。 |
| attr.previousSibling | 属性没有同级节点。 |
| attr.removeChild | 属性没有子节点。 |
| attr.replaceChild | 属性没有子节点。 |
| attr.textContent | 使用 attr.value 代替。 |
