HTML DOM简介
什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
DOM (Document Object Model) 是文档对象模型，是 HTML 和 XML 文档的编程接口。
DOM是一种与平台、语言无关的接口，允许程序和脚本动态地访问或更新HTML或XML文档的内容、结构和样式。
HTML DOM 节点树
HTML 文档中的所有内容都是节点：整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。
DOM 以树结构表达 HTML 文档。对象的 HTML DOM树如下
在节点树中，顶端节点被称为根（root）。每个节点都有父节点、除了根（它没有父节点）。一个节点可拥有任意数量的子节点。同胞是拥有相同父节点的节点。
示例
<!DOCTYPE html>
<html lang="en">
<!--<html>是根节点,包含两个子节点为<head> 和 <body>。<head>元素是 <html>的首个子节点，<body>元素是其的最后一个子节点-->
<head>
<meta charset="UTF-8">
<title>你好世界</title>
</head>
<body>
<!--文本节点 "Hello world!" 的父节点是 <p> 节点-->
<p>Hello world!</p>
</body>
</html>
注意：DOM 处理中的常见错误是希望元素节点包含文本。可通过节点的 innerHTML 属性来访问文本节点的值。（后面会讲）
HTML DOM方法和属性
HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。(（比如添加或修改元素）。)
HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值(（比如节点的名称或内容）)。
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
常用的 HTML DOM 方法：
getElementById(id)：获取带有指定 id 的节点（元素），参数是id名
getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表。
appendChild(node)：插入新的子节点
removeChild(node)：删除子节点
replaceChild()：替换子节点。
insertBefore()：在指定的子节点前面插入新的子节点。
createAttribute()：创建属性节点。
createElement()：创建元素节点。
createTextNode()：创建文本节点。
getAttribute()：返回指定的属性值。是常用的节点属性获取方式之一。
setAttribute()：把指定属性设置或修改为指定的值。
常用的 HTML DOM 属性
innerHTML：节点（元素）的文本值
parentNode：节点（元素）的父节点
childNodes：节点（元素）的子节点
children：返回指定元素的子元素节点集合。（children是非标准属性,childNodes是标准属性。）
firstElementChild：返回指定元素的第一个子元素节点
lastElementChild：返回指定元素的最后一个子元素节点
attributes：节点（元素）的属性节点
nodeName：属性规定节点的名称。（nodeName 始终包含 HTML 元素的大写字母标签名。nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document）
nodeValue：规定节点的值。（元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue：是文本本身，属性节点的 nodeValue 是属性值）
nodeType：返回节点的类型。nodeType 是只读的。nodeType比较重要的节点类型有
查找HTML元素
通过查找HTML元素简单了解如何使用方法和和属性。获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素：document.getElementById(id)
通过标签名找到 HTML 元素：document.getElementsByTagName(name)
通过类名找到 HTML 元素：document.getElementsByClassName(name)
可在如下代码中查找id=“intro“中的元素并显示其内容，查找id=”container”的元素中第一个标签名为<p>的元素的内容。查找第一个class=”intro1”的元素的内容。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找元素</title>
<style type="text/css">
#container{}
.box{}
#intro{}
.intro1{}
</style>
</head>
<body>
<p>查找元素</p>
<div class="box" id="container">
<p id="intro">第一个P元素</p>
<p class="intro1">第二个P元素</p>
</div>
<script>
var x=document.getElementById("intro");
document.write("<p>通过id查找HTML元素:"+x.innerHTML+"</P><br/>");
// var m=document.getElementById("container");
// var y=m.getElementsByTagName("p");
var y=document.getElementById("container").getElementsByTagName("p");
document.write("<p>通过标签名查找HTML元素:"+y[0].innerHTML+"</p><br/>");
z=document.getElementsByClassName("intro1");
document.write("<p>通过类名查找HTML元素:"+z[0].innerHTML+"</p><br/>");
</script>
</body>
</html>
