DOM

[TOC]

DOM 核心

文档对象模型，是 w3c 组织推荐的处理可拓展标记语言 通过 DOM 接口可以改变网页的内容，结构，样式

元素创建

• document.write

  会导致页面的重绘，不推荐使用

• innerHtml

  批量操作时效率高（不适用字符串拼接的情况下）

• createElement

  更加语义化，逻辑结构清晰

元素增加

• appendChild

  在元素后面添加

• insertBefore

  在元素之前添加

元素删除

• removeChild

修改元素

• 修改元素属性

  src href title 等

• 修改普通元素的内容

  innerHTML,innerText

• 修改表单元素

  value,type,disabled 等

• 修改元素元素公式

  style, className

查询元素

• getElementById(不推荐)
• getElementByClassName(不推荐)
• getElementByTagName(不推荐)
• querySelector,querySelectorAll
• document.body（获取 body）
• document.documentElement（获取 html 元素）
• 父元素 parentNode
• 子元素 children
• 兄弟元素 previousElementSibling,nextElementSibling

元素设置属性

• setAttribute
• getAttribute(可以获取自定义属性)
• removeAttribute

事件操作

• element.onclick

  同一个元素只可以注册一个事件

• element.addEventListenter()

  ie9 以前不支持，可以注册多个监听处理函数 第三个参数为 true 是表示在事件捕获时调用处理函数，false 在事件冒泡阶段处理

• removeEventListenter()

  解绑事件

DOM 事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流 事件捕获：从上往下（Document->element html -> element body ......） 事件冒泡：从下往上

dom 事件流阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

事件对象

document.onclick = function (event) {};
// event 为一个事件对象，当作形参来看
// 事件对象只有有了事件才会存在，他是系统自动创建的，不需要我们传递参数
// 事件对象是我们事件的一系列相关数据集合

事件对象常见的属性和方法

事件对象属性和方法	说明
e.target	返回触发事件的对象 （标准）
e.srcElement	返回触发事件的对象 （非标准 ie678 使用）
e.type	返回事件的类型 比如 click mouseover 不带 on
e.cancelBubble	该属性阻止冒泡 ie678 使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8 使用，比如不让链接跳转
e.parentDefault()	该属性阻止默认事件（默认行为）标准
e.stopPropagation()	阻止冒泡 标准

事件冒泡的用途

事件委托