DOM总结详细版

---

1.DOM可以做什么

找元素

设置元素的属性、样式

动态创建、删除元素

事件（触发响应） 事件源（事件的触发者）+事件名称+事件响应程序

2.DOM对象的属性

a）src、title、className、href

b）innerHTML获取标签的内容，解析到html树

innerText获取标签的内容

c）表单元素属性

type、value、checked、selected、 disabled

3节点的属性

a）nodeType

1 元素节点

2 属性节点

3 文本节点

nodeName 节点名

nodeValue 节点值  元素节点值为null

4.设置样式的两种方式？

className

style（DOM的style）其属性：backgroundColor、backgroudImage、color、width、height、border、opacity

5.隐藏显示

display  元素隐藏后，不占位置，页面上元素会重新排列

visibility 元素隐藏后，占位置，hidden，visible

opacity，position

6动态创建元素

动态创建表格

 方式1createElement()

方式2

rows                          (只读，table和textarea能用)

insertRow()              (只有table能调用)
deleteRow()           (只有table能调用)
cells           (只读，table和textarea能用)
insertCell()               (只有tr能调用)
deleteCell()              (只有tr能调用) 

 7.addEventListener

a）事件冒泡

btn.addEventListener("click",handle,false);

b）事件捕获

 btn.addEventListener("click",handle,true);

8、事件的三个阶段：捕获，目标执行，冒泡

9.事件对象的获取方式

标准DOM的事件对象
在事件处理程序中传入事件对象
IE中的事件对象
window.event
跨浏览器的解决方案
event = event ? event : window.event;

 10.事件对象 ？

获取当前对象(只读)
target 触发事件的元素
currentTarget 始终是当前执行事件处理程序的对象
IE中对应的属性 srcElement == target
事件类型(只读)
type click、mouseover。。。
事件处于哪个阶段(只读)
eventPhase
取消默认行为
preventDefault()
IE中对应的 returnValue = false
取消冒泡和捕获
stopPropagation() 取消冒泡和捕获
IE中对应的 cancelBubble=true 取消冒泡(IE中不支持捕获)

11事件委托

利用事件冒泡，把多个dom对象的事件，注册到父容器

---

获取事件源、绑定事件、书写事件驱动程序。

获取事件源：document.getElementById(“box”);

绑定事件：  box.onclick = function(){ 程序 };

书写事件驱动程序：关于DOM的操作。

2.

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

3.dom节点操作是重点

a）创建节点 

新的标签（节点） = document.createElement(“标签名”);

b）插入节点

父节点.appendChild(新节点); 父节点的最后插入一个新节点

 父节点.insertBefore(要插入的节点，参考节点)；在参考节点前插入;

c）删除节点

父节点.removeChild（子节点）；必须制定要删除的子节点

节点自己删除自己：

不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)

d）复制节点

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

 true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

4.dom元素

 dom是复杂数据类型，数据以树的形式存在

节点是dom的组成，是对象，有属性和方法