DOM：Document Object Model，文档对象模型，是W3C制定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web标准。

节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点 HTML DOM 节点树：HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。

节点树中的节点彼此拥有层级关系
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点例：

<html>
	<head>
		<title>DOM 教程</title>
	</head>
	<body>
		<h1>DOM 第一课</h1>
		<p>Hello world!</p>
	</body>
</html>

DOM属性

HTML DOM属性是节点的值，可获取或设置节点的属性值。

属性	描述
firstChild	返回指定节点的第一个子节点
lastChild	返回指定节点的最后一个子节点
parentNode	返回指定节点的父节点
childNodes	返回指定节点的所有子节点
innerHTML	设置或返回开始和结束标签之间的 HTML
innerText	设置或返回从开始位置到结束位置的文本内容
nodeValue	属性设置或返回指定节点的节点值
nodeType	返回以数字值，返回指定节点的节点类型

获取指定节点：
node.firstChild：返回指定节点node的第一个子节点
node.lastChild：返回指定节点node的最后一个子节点
node.childNodes：返回指定节点的所有子节点
node.parentNode：返回指定节点node的父节点
node.firstElementChild：返回指定节点node的第一个元素节点
node.lastElementChild：返回指定节点node的最后一个元素节点
node.children：返回指定节点node的所有元素节点

innerHTML与innerText属性：
innerHTML属性可以获取或修改节点的子节点HTML结构
innerText属性可以获取或修改节点的文本。然而在实际应用中，很多人会误以为innerHTML属性的作用是获取或修改的是文本。

nodeValue属性与nodeType属性：

nodeValue属性规定了节点的值。
元素节点的nodeValue是 undefined 或 null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性值
nodeType属性能够返回节点的类型，是只读的属性

节点类型	节点类型值
元素	1
属性	2
文本	3
注释	8
文档	9
文档类型	10

DOM方法

所有HT义ML元素被定为对象，DOM方法指的是可以在节点上执行的操作，如添加、修改、删除元素等。

掌握创建、插入、替换节点的方法的使用：

创建节点：

document.createElement()：根据参数指定的标签名称创建一个元素节点，并返回新建元素节点（Element）的引用。
document.createTextNode()：根据参数指定的文本内容创建一个文本节点，并返回新建文本节点（Text）的引用。
document.createAttribute()：根据参数指定的属性名称创建一个属性节点，并返回新建属性节点（Attr）的引用。

Element

Element类型是最常用的节点类型，在HTML DOM中，Element对象表示一个HTML元素。
Element类型的特征：

nodeType值为1
nodeName值为元素的标签名称
nodeValue值为null
parentNode是Document或Element类型节点
其子节点可能是Element、Text、Comment等

插入节点，连接到HTML DOM节点树：

父节点名称.appendChild(子节点名称)：把子节点添加到指定的父节点中。父节点名称.insertBefore(子节点2名称，子节点1名称)：指定的已有子节点1之前插入新的子节点2

替换节点：

node.replaceChild(newnode,oldnode)：用newnode替换oldnode，newnode可以是文档中已经存在的节点，也可以是新创建的节点

删除节点：

parentnode.removeChild(childnode)：删除指定parentnode节点中的子节点childnode
parentnode.removeChild()：删除指定parentnode节点中的所有子节点
childnode.parentNode.removeChild(childnode)：使用节点的parentNode属性引用其父节点

属性节点操作：

document.createAttribute()：创建属性节点
Attrnode.value=”attrvalue”：设置属性节点的属性值
node.setAttributeNode(attr);将创建的属性添加到元素节点中 第二种方法
para.setAttribute("style","background-color: red;")

访问属性节点的属性值：

elementnode.attributes[“属性名称”].value：不建议使用
elementnode.getAttributeNode(“属性名称”).value
elementnode.getAttribute(attribute)：返回指定元素node节点的指定属性的值（HTML标签的属性，不是CSS样式中的属性）
node.setAttribute(attribute,value)：把指定node节点的指定属性attribute设置或修改为指定的值value，attribute和value必须以字符串形式进行传递。

DOM操作样式

使用style属性：获取元素的style属性声明的内联样式。
<div style=“width:200px;height:200px;cololr:red;”></div> 注意：

样式设置必须符合CSS规范，否则该样式会被忽略。
如果样式属性名称中不带“-”号，例如color，直接使用style.color即可获得该属性值；如果样式属性名称中带有“-”号，例如font-size，对应的style对象属性名称为fontSize。
如果需要访问float样式属性，不能使用style.float，因为float是JavaScript的保留字，不能用作属性名称，应该使用style.cssFloat访问该样式属性。
使用style对象获取的属性与元素最终显示效果并不一定相同，因为除了内联样式声明之外，还可以通过元素以及链接样式表的方式改变元素的显示效果。
style属性是可写的，也就是说可以通过style属性设置元素样式。因为内联样式的优先级比内部的、外部的优先级高，所以设置后是肯定有效的。使用class属性：读取或设置某一元素所指派的类样式

		<script>
			function change(){
				var obj=document.getElementById("div1");
				obj.className="testCSS";
			}
		</script>
	</head>
	<body>
		<div id="div1" class="divCSS">
		         通过className属性读取或设置某一元素所应用的类样式。			</div>
		<button onclick="change()">change</button>
	</body>

JavaScript里的DOM对象

节点