HTMLDOMDocument对象
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
浏览器支持
所有主要浏览器都支持 Document 对象。
参考地址：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node
https://www.runoob.com/jsref/dom-obj-document.html
Document 对象属性和方法
HTML文档中可以使用以下属性和方法:
| 属性 / 方法 | 描述 |
|---|---|
| document.activeElement | 返回当前获取焦点元素 |
| document.addEventListener() | 向文档添加句柄 |
| document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
| document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
| document.anchors | 已废弃。返回对文档中所有 Anchor 对象的引用。 |
| document.applets | 返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 |
| document.title | 返回当前文档的标题。 |
| document.baseURI | 返回文档的绝对基础 URI |
| document.URL | 返回文档完整的URL |
| document.body | 返回文档的body元素 |
| document.open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| document.close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| document.writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
| document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
| document.createAttribute() | 创建一个属性节点 |
| document.createComment() | createComment() 方法可创建注释节点。 |
| document.createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象。 |
| document.createElement() | 创建元素节点。 |
| document.createTextNode() | 创建文本节点。 |
| document.getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| document.getElementsByName() | 返回带有指定名称的对象集合。 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
| document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
| document.documentElement | 返回文档的根节点 |
| document.documentMode | 返回用于通过浏览器渲染文档的模式 |
| document.documentURI | 设置或返回文档的位置 |
| document.domain | 返回当前文档的域名。 |
| document.domConfig | 已废弃。返回 normalizeDocument() 被调用时所使用的配置。 |
| document.embeds | 返回文档中所有嵌入的内容（embed）集合 |
| document.forms | 返回对文档中所有 Form 对象引用。 |
| document.images | 返回对文档中所有 Image 对象引用。 |
| document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
| document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
| document.inputEncoding | 返回用于文档的编码方式（在解析时）。 |
| document.lastModified | 返回文档被最后修改的日期和时间。 |
| document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
| document.normalize() | 删除空文本节点，并连接相邻节点 |
| document.normalizeDocument() | 删除空文本节点，并连接相邻节点的 |
| document.readyState | 返回文档状态 (载入中……) |
| document.referrer | 返回载入当前文档的文档的 URL。 |
| document.renameNode() | 主流浏览器不支持重命名元素或者属性节点。 |
| document.scripts | 返回页面中所有脚本的集合。 |
| document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
警告 ! ! !
在 W3C DOM核心，文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性：
| 属性 / 方法 | 避免的原因 |
|---|---|
| document.attributes | 文档没有该属性 |
| document.hasAttributes() | 文档没有该属性 |
| document.nextSibling | 文档没有下一节点 |
| document.nodeName | 这个通常是 #document |
| document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
| document.nodeValue | 文档没有一个节点值 |
| document.ownerDocument | 文档没有主文档 |
| document.ownerElement | 文档没有自己的节点 |
| document.parentNode | 文档没有父节点 |
| document.previousSibling | 文档没有兄弟节点 |
| document.textContent | 文档没有文本节点 |
Document对象属性和方法具体解释
activeElement
// 当前获得焦点的元素
var x = document.activeElement.tagName;
// x 输出结果为：BUTTON
定义和使用
activeElement 属性返回文档中当前获得焦点的元素。
♥ 注意： 该属性是只读的。
♥ 提示： 为元素设置焦点，可以使用 element.focus() 方法。
♥ 提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。
语法
document.activeElement
addEventListenerremoveEventListener
文档添加 onmousemove 事件句柄，当在文档中移动鼠标时会显示随机数。
点击按钮移除事件句柄。
定义和使用
document.addEventListener() 方法用于向文档添加事件句柄。
♥ 提示：可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
♥ 提示：使用 element.*addEventListener() 方法为指定元素添加事件句柄。
document.removeEventListener() 方法用于移除由 document.addEventListener() 方法添加的事件句柄。
♥ 注意: 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。
匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。
♥ 提示： 使用 element.addEventListener() 和 element.removeEventListener() 方法来添加或移除指定元素的事件句柄。
语法
document.addEventListener(event, function, useCapture)
document.removeEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必需。描述事件名称的字符串。 |
| 注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。 | |
| 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 | |
| function | 必需。描述了事件触发后执行的函数。 |
| 当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 | |
| useCapture | 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。 |
| 可能值： | |
| * true - 事件句柄在捕获阶段执行 | |
| * false- 默认。事件句柄在冒泡阶段执行 |
adpotNode
// 获取 iframe 中的第一个 H1 元素的，并将其插入到当期文档中：
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(h);
定义与用法
adoptNode() 方法用于从另外一个文档中获取一个节点。
节点可以是任何节点类型。
♥ 注意: 节点下的所有子节点都会获取到。
♥ 注意: 节点及其子节点会再源文档中删除。
♥ 提示：使用 document.importNode() 方法来拷贝节点，但原文档中的节点不删除。.
♥ 提示：使用 element.cloneNode() 方法来拷贝当前文档的节点，且节点不会被删除。
语法
document.adoptNode(node)
baseURI
单击按钮显示基础URL