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能用)
deleteRow() (只有table能调用)
cells (只读,table和textarea能用)
insertCell() (只有tr能调用)
deleteCell() (只有tr能调用)
7.addEventListener
a)事件冒泡
btn.addEventListener("click",handle,false);
b)事件捕获
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的组成,是对象,有属性和方法