HTML DOM总结
HTML DOM总结
1：HTML DOM介绍
HTML DOM：HTML Document Object Model
定义了访问和操作 HTML 文档的标准方法。
- 核心DOM：针对任何结构的的标准文档
- XML DOM：针对XML结构文档的标准文档，XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
- HTML DOM：针对HTML文档的标准文档，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
HTML DOM 是W3C制定的一套对关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM 将 HTML 文档表达为树结构。
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树。
2：DOM节点：
在HTML DOM中，所有事物都是节点，DOM是节点树的HTML
- 整个文档是一个文档节点
- 每一个html元素是元素节点
- html元素内的文本是文本节点
- html元素的属性是属性节点
- 注释是注释节点
节点树中所有节点都可以通过js来访问，可以修改、删除、添加以及创建节点
节点树中的节点之间是层级关系，父(parent)、子(child)、同胞(sibling)。
- 节点树中的顶端节点是根节点(root)
- 除了根节点之外的所有节点都有父节点
- 一个节点只有一个父节点，可以有许多祖先节点，可以有许多子节点以及后代节点
- 拥有相同父节点的节点是同胞节点
3：DOM属性
所有html元素都是一个对象，有对象属性和对象方法，属性是能够获取和设置的值，方法是对元素的CRUD；
属性是能够获取和设置的html元素的值
HTML DOM 属性：
- innerHTML：元素节点的文本值
- parentNode：元素节点的父节点
- childNodes：元素节点的自己点
- attributes：元素节点的属性节点
- firstChild:首个子元素
- lastChild：最后一个子元素
- nodeName:节点的名称
- nodeName是只读的
- 元素节点的nodeName与标签名一样
- 属性节点的nodeName与属性名一样
- 文本节点的nodeName是#text
- 文档节点的nodeName是#document
- nodeValue：节点的值
- 元素节点的nodeValue：undefined || null
- 文本节点的nodeValue：文本本身
- 属性节点的nodeValue：属性值
- nodeType：节点的类型
- 只读
- 元素：nodeType为：1
- 属性：nodeType为：2
- 文本：nodeType为：3
- 注释：nodeType为：8
- 文档：nodeType为：9
4：DOM方法
方法是在节点元素上进行的操作
HTML DOM 方法：
- document.getElementById("id")
- document.getElementsByTagName("TagName")
- document.getElementsByClassName("class")//ie5,6,7,8无效
- element.appendChild()：把新的节点添加到指定节点
- removeChild()：删除子节点
- replaceChild()：替换子节点
- insertBefore()：在指定的子节点前面插入新的子节点
- document.createAttribute()：创建属性节点
- document.createElement()：创建元素节点
- document.createTextNode()：创建文本节点
- getAttribute()：返回指定的属性值
- setAttribute()：设置属性的值
5：DOM修改
- js能够改变页面中所有html元素--e.innerHTML="文本"
- js能够改变页面中所有html属性--e.src="a.jpg"
- js能够改变页面中所有css样式--e.style.color = "#0f0"
- js能够创建新的HTML元素
- js能够删除已有的HTML元素
- js能够对页面中的所有事件做出反应
创建元素：
parent.appendChild(child)
parent.insertBefore(newChild,targetChild)
删除HTML元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
替换 HTML 元素:
parent.replaceChild(newCihld,oldChild)
6：DOM事件
onclick
onload
onunload
onchange
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove
