DOM 节点
包含的节点内容：
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
DOM 处理中的常见错误是希望元素节点包含文本。
在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。
1：HTML DOM 常用方法方法
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
2：HTML 的属性：
innerHTML
<html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script> </body> </html>
nodeName 属性：
nodeName 属性规定节点的名称
nodeValue 属性
nodeValue 属性规定节点的值。
nodeType 属性
nodeType 属性返回节点的类型
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
3：HTML DOM 访问：
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementById() 方法
<!DOCTYPE html> <html> <body> <p>Hello World!</p> <div id="main"> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> x=document.getElementById("main").getElementsByTagName("p"); document.write("div 中的第一段的文本: " + x[0].innerHTML); </script> </body> </html>
<!DOCTYPE html> <html> <body> <p>Hello World!</p> <div id="main"> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> x=document.getElementById("main").getElementsByTagName("p"); document.write("div 中的第一段的文本: " + x[0].innerHTML); </script> </body> </html>
4：修改html dom
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
5:HTML DOM - 元素
添加、删除和替换 HTML 元素。
6:HTML DOM - 事件