【DOM】DOM事件和DOM操作总结

前言

DOM是文档对象模型，DOM是W3C的标准。DOM定义了访问HTML和XML文档的标准，即独立于平台和语言的接口。

W3C DOM标准分为以下三个标准:

• 核心DOM --针对任何结构化文档的标准模型
• XML DOM–针对XML文档的标准模型
• HTML DOM–针对HTML文档的标准模型

HTML DOM 节点：在 HTML DOM (Document Object Model) 中, 所有的都是 节点：

• 文档是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性都是属性节点
• 插入到 HTML 元素中的文本为文本节点
• 注释是注释节点

一、DOM事件

1 事件级别

三个事件级别，注意没有 DOM1，因为 DOM1 标准制定的时候没有涉及 事件。DOM3 比 DOM2 只是增加了一些事件类型。

• DOM0：写法element.onclick = function(){}
  DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。
• DOM2：写法element.addEventListener(event-name, callback, useCapture)
  • event-name: 事件名称，可以是标准的DOM事件
  • allback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象event
  • useCapture: 默认是false，代表事件句柄在冒泡阶段执行
• DOM3：写法element.addEventListener(event-name, callback, useCapture)，和DOM2级一致 只是在DOM 2级事件的基础上添加了更多的事件类型。
• DOM4：

2 事件的分类

• 鼠标事件、键盘事件、框架/对象（Frame/Object）事件、表单事件、剪切板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件、其他事件。

3 事件模型和事件流

• DOM事件模型：捕获、冒泡。

• 事件流：用户与界面交互的过程中，事件的流向过程
  （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
  （2）目标阶段：真正的目标节点正在处理事件的阶段；
  （3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

捕获的流程为：window -> document -> html -> body -> … -> 目标元素。
冒泡的流程为：目标元素 -> … -> body -> html -> document -> window。

冒泡与捕获的详细内容见另一篇博文【Javascript】事件冒泡和事件委托

4 Event 对象常见应用

1. 阻止默认行为（默认事件）：event. preventDefault()。
2. 阻止冒泡：

• event.stopPropagation()：阻止事件冒泡到父元素。
• event.stopImmediatePropagation()：阻止剩下的事件处理程序被执行。如果一个元素上绑定了三个事件，在其中一个事件上调用了这个方法，那其他 的两个事件将不会被执行。

3. event.target & event.currentTarget: 详情移步DOM事件中target和currentTarget

• target是事件触发的真实元素
• currentTarget是事件绑定的元素
• 当事件是子元素触发时，currentTarget为绑定事件的元素，target为触发事件的子元素
• 当事件是元素自身触发时，currentTarget和target为同一个元素。

二、常用DOM操作

1 在DOM中，创建、添加、删除、移除、替换、插入和查找节点

① 通过以下代码创建节点

• node.createAttribute(node) ：创建属性节点。
• node.createElement('nodeTag') ：创建一个具体的元素
• node.createTextNode(textString)：创建一个文本节点

② 添加、移除、替换、插入节点

• node.appendChild(newNode): 把新的子节点添加到指定节点。
• parentNode.removeChild(child): 删除子节点。
• parentNode.replaceChild(newNode, oldNode): 替换子节点。
• parentNode.insertBefore(newNode,oldNode): 在指定的子节点前面插入新的子节点。

③ 通过以下方式查找节点

• 按照HTML查找

  • document.getElementById("id"): 返回带有指定 ID 的元素。
  • parentNode.getElementsByTagName("tagname"): 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
  • parentNode.getElementsByClassName("classname"): 返回包含带有指定类名的所有元素的节点列表。
  • document.getElementsByName("name"): 查找拥有 name 属性的表单时才会用name属性查找

• 按照节点关系：

  • 父子关系
    • child.parentElement: 获取一个节点的父元素
    • parentNode.children: 获取父元素下的所有直接子元素
    • parentNode.firstElementChild: 获取父元素下的第一个直接子元素
    • parentNode.lastElementChild: 获取父元素下的最后一个直接子元素
  • 兄弟关系
    • element.nextSibling: 返回元素节点之后的兄弟节点（包括文本节点、注释节点）
    • element.nextElementSibling: 只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）
    • element.previousElementSibling: 获取一个元素相邻的前一个兄弟元素

• 按照选择器:

  • parentNode.querySelector("selectors"): 返回文档中匹配指定 CSS 选择器的一个元素。
  • parentNode.querySelectorAll("selectors") : 返回文档中匹配指定 CSS 选择器的所有元素
    注: selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串

2 一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点