w3c 学习html DOM

什么是DOM？
DOM是W3C标准，定义了访问HTML 和 XML文档的标准
W3C 文档对象模型（DOM）是中立于平台和语言接口，它允许程序动态的访问和更新文档的内容、结构和样式。
W3C DOM 由3个部分组成：
核心 DOM ：针对任何结构化文档的标准模型
XML DOM：针对XML的标准模型
HTML DOM：针对HTML文档的标准模型
DOM 是 document object model（文档对象模型）的缩写

什么是XML DOM？
XML DOM 定义所有XML元素的对象和属性，以及访问它们的方法

什么是HTML DOM？
HTML DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法

在HTML DOM中，所有事物都是节点，DOM 是被视为节点树的HTML

DOM节点；
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

在节点树中，最顶端节点称为根节点（在html中指html元素）
每个节点都有父节点，除了根节点
一个节点可以拥有任意数量的子
同胞是拥有相同父节点的节点

DOM方法：
所有的HTML元素被定义为对象
方式我们可以在节点上执行的操作
属性是能够获取或访问的值

getElementById()					返回带有指定ID的元素
getElementsByTagName()				返回包含带有指定标签名称（例如p标签）的所有元素的节点列表(节点数组)
getElementsByClassName()			返回包含带有指定类名的所有元素的节点列表（在IE5,6,7,8中 无效）

appendChild(node)					添加新元素（子节点），首先必须要创建元素，把它追加到已有的元素上
removeChild(node)					删除子节点(元素)，必须清楚该元素的父元素。parent.removeChild(node)
replaceChild() 						替换子节点,也是需要清楚元素的父元素， parent.replaceChild(新元素，旧元素)

insertBefore()						在指定的子节点前面插入新的子节点，父元素.insertBefore(新元素，这个子元素前面)
createAttribute()					创建属性节点
createElement()						创建元素节点
createTextNode() 					创建文本节点
getAttribute() 						返回指定的属性值
setAttribute() 						把指定属性设置或修改为指定的值


DOM属性：
属性是节点的值，能够获取和设置

innerHTML							节点(元素)的文本值、获取和替换，改变元素内容
nodeName							规定节点的名称（只读的）
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

nodeValue							规定节点的值（元素节点的nodeValue是undefined 或 null）
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType							返回节点的类型，nodeType是只读的
元素类型			nodeType
元素 				1
属性 				2
文本 				3
注释 				8
文档 				9

parentNode							节点(元素)的父节点
childNodes							节点(元素)的子节点
attributes							节点(元素)的属性节点
firstChild 							返回文档的首个子节点
lastChild 							返回文档的最后一个子节点

DOM根节点：
document.documentElement 			全部文档
document.body 						文档的主体



改变HTML样式
节点对象.style.color = "blue";


DOM 事件：
onload 和 onunload 事件
用户进入和离开页面时，会出发 onload 和 onunload事件
onload事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同的版本的网页

onchange 			改变内容事件，输入字段的验证
onmouseover			鼠标指针移动到元素
onmouserout 		鼠标指针离开元素
onmousedown 		鼠标指针被按下
onmouseup 			鼠标按钮被松开
onclick 			鼠标点击事件