DOM HTML 经典总结 案例解析
在学习之前,我们需要对HTML/JavaScript有基本的了解。
HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。而DOM就是通过JavaScript,你可以重构整个HTML文档，您可以添加、移除、改变或重排页面上的项目。
???? 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
节点：
根据DOM，HTML文档中的每个成分都是一个节点。
DOM 是这样规定的：
l???????? 整个文档是一个文档节点
l???????? 每个 HTML 标签是一个元素节点
l???????? 包含在 HTML 元素中的文本是文本节点
l???????? 每一个 HTML 属性是一个属性节点
l???????? 注释属于注释节点
元素节点类型(nodeType)：1
文本节点类型(nodeType：3
属性节点类型(nodeType：2
Node层次：
节点彼此都有等级关系。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
下面是一个表示一个文档树（节点树）： 
节点的访问：
你可以通过下列方式来查找你希望操作的元素：
· 通过使用 getElementById() 和 getElementsByTagName() 方法
· 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素，getElementsByTagName() 会把它们全部找到，不管 <p> 元素处于文档中的哪个层次。同时，getElementById() 方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。
语法：
<span id=”ID”></span>
document.getElementById("ID");
注：此方法只能用于document 对象
getElementsByTagName() 语法
document.getElementsByTagName("标签名称");
或者：
document.getElementById('ID').getElementsByTagName("标签名称");
实例：
下面这个例子会返回所有 <p> 元素的一个节点列表，且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代：
document.getElementById('maindiv').getElementsByTagName("p");
parentNode、firstChild以及lastChild方法?
??????????????????????????????????????????????????parenNode--------父节点
????????????????????????????????????????????????? firstChild-----------首节点?
??????????????????????????????????????????????????lastChild-----------尾节点
parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点
?
?
一种更简单的方法：
?
