HTML DOM
HTML DOM 简介
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
-
核心 DOM - 针对任何结构化文档的标准模型
”万能的 所以繁琐“ -
XML DOM - 针对 XML 文档的标准模型
“XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。” -
HTML DOM - 针对 HTML 文档的标准模型
”HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。“
HTML DOM 节点
DOM 节点（DOM Nodes）
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
ps: 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
图例：
节点间关系
节点树：包含了所有节点（元素，文本） 完整的结构
1） 父子关系
- node.parentNode 获得node的父节点
- node.childNodes 获得node的直接子代节点
- node.firstChild 获得node下的第一个子节点
- node.lastChild 获得node下最后一个子节点
2）兄弟关系
- node.previousSibling 返回当前节点的前一个兄弟节点
- node.nextSibling 返回当前节点的下一个兄弟节点
元素树 ： 仅包含元素节点的树形结构
1）父子关系
- elem.parentElement 返回父元素对象
- elem.children 返回子元素对象集合 IE8支持
- elem.firstElementChild 返回第一个子元素对象
- elem.lastElementChild 返回最后一个子元素对象
2）兄弟关系 - elem.previousElementSibling 返回当前元素的前一个兄弟元素
- elem.nextElementSibling 返回当前元素的下一个兄弟元素
HTML DOM 属性
编程接口
- 可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
- 所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
- 方法是您能够执行的动作（比如添加或修改元素）。
- 属性是您能够获取或设置的值（比如节点的名称或内容）。
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容。
实例
<html>
<body>
<p id="intro">Hello World!</p>
<script>
//获取 id="intro" 的 <p> 元素的 innerHTML
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
结果：
注意： 在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。innerHTML 属性可用于获取或改变任意 HTML 元素，包括 和 。
nodeName 属性
nodeName 属性规定节点的名称，是只读的。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
实例
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
//取回 <p id="intro"> 标签的文本节点值
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
结果：
nodeType 属性
nodeType 属性返回节点的类型，类型 number，是只读的。
比较重要的节点类型有
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
查找
三个元素不需要找，直接用
document.documentElement <html>
document.head <head>
document.body <body>
