一、HTML DOM Document 对象
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
打印document对象显示：
二、Document 对象集合
| 集合 | 描述 |
|---|---|
| all[] | 提供对文档中所有 HTML 元素的访问。 |
| anchors[] | 返回对文档中所有 Anchor 对象的引用。 |
| applets | 返回对文档中所有 Applet 对象的引用。 |
| forms[] | 返回对文档中所有 Form 对象引用。 |
| images[] | 返回对文档中所有 Image 对象引用。 |
| links[] | 返回对文档中所有 Area 和 Link 对象引用。 |
|
scripts[]
|
返回文旦中所有的Scripts 代码节点 |
三、Document 对象属性
| 属性 | 描述 |
|---|---|
| body |
提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。 |
| cookie | 设置或返回与当前文档有关的所有 cookie。 |
| domain | 返回当前文档的域名。 |
| lastModified | 返回文档被最后修改的日期和时间。 |
| referrer | 返回载入当前文档的文档的 URL。 |
| title | 返回当前文档的标题。 |
| URL | 返回当前文档的 URL。 |
| baseURI | 返回绝对基础URI |
| doctype | 返回文档声明类型DTD |
| documentElement | 返回文档根节点 |
|
DOCUMENT_NODE
|
适用于通过浏览器渲染文档的模式 |
| documentURI | 设置活返回文档的位置 |
| referrer | 返回载入当前文档的文档的URL |
| readyState |
返回当前文档的载入状态
|
|
inputEncoding
|
返回文档的编码方式 |
|
activeElement
|
返回文档的焦点元素 注意： 该属性是只读的。 提示： 为元素设置焦点，可以使用 element.focus() 方法。 提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。 |
四、Document 对象方法
| 方法 | 描述 |
|---|---|
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
//write(); 支持html 的输出 document.write('测试内容'); document.write('<h1>标题内容</h1>'); document.write("<script> alert('测试代码'); </script>");
五、DOM 文档节点操作常用方法
1.查找节点
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的 |
2.创建节点
| document.createAttribute() | 创建一个属性节点 |
| document.createComment() | createComment() 方法可创建注释节点。 |
| document.createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象。 |
| document.createElement() | 创建元素节点。 |
| document.createTextNode() | 创建文本节点。 |
3.
| document.normalize() | 删除空文本节点，并连接相邻节点 |
| document.normalizeDocument() | 删除空文本节点，并连接相邻节点的 |
| document.renameNode() | 重命名元素或者属性节点。 |
| document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
4.节点事件处理
| document.addEventListener() | 向文档添加句柄 |
| document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
更多：