DOM HTML 经典小结 案例解析
日期：2014-05-17 浏览次数：20862 次
在学习之前,我们需要对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" 的节点
- var?x=document.getElementById("maindiv");? ??
- x.parentNode.removeChild(x);???
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
?
对 firstChild 最普遍的用法是访问某个元素的文本：
- var?x=[a?paragraph];? ??
- var?tex?=?x.firtChild.nodeValue;???
var x=[a paragraph]; var tex = x.firtChild.nodeValue;
?
根节点：
有两种特殊的文档属性可用来访问根节点：
l???????? document.documentElement
l???????? document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
节点的信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName
????? nodeName 属性含有某个节点的名称。
????? nodeName（节点名称）
????? nodeValue（节点值）
????? nodeType（节点类型）?
nodeName?
??????nodeName 属性含有某个节点的名称。
·????? 元素节点的 nodeName 是标签名称
·????? 属性节点的 nodeName 是属性名称
·????? 文本节点的 nodeName 永远是 #text
·????? 文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
?
