一、DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）
它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口

1.1 节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子
节点的类型有七种：

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法
R-C.png

1.2 常用节点的操作API

1.2.1 查询节点API

  • **document.querySelector(selectors)**
    • 接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
  • **document.querySelectorAll(selectors)**
    • 接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
  • **document.getElementsByTagName(tagName)**
    • 返回所有指定HTML标签的元素
  • **document.getElementsByClassName(className)**
    • 返回包括了所有class名字符合指定条件的元素
  • **document.getElementsByName(name)**
    • 用于选择拥有name属性的HTML元素（比如
      、、07.DOM 与 事件 - 图2、、和等）
    • **document.getElementById(id)**
      • 返回匹配指定id属性的元素节点。
    • **document.elementFromPoint(x,y)**
      • 返回位于页面指定位置最上层的Element子节点。

      • image.png

      1.2.2 创建节点API

      • **document.createElement(tagName)**
        • 用来生成HTML元素节点。
      • **document.createTextNode(text)**
        • 用来生成文本节点
      • **document.createAttribute(name)**
        • 生成一个新的属性对象节点，并返回它。

      • **document.createDocumentFragment()**

        • 生成一个DocumentFragment对象

          1.2.3 获取与修改节点属性

      • **Element.attributes**

        • 返回当前元素节点的所有属性节点
      • **Element.id**
        • 返回指定元素的id属性，可读写
      • **Element.tagName**
        • 返回指定元素的大写标签名
      • **Element.innerHTML**
        • 返回该元素包含的HTML代码，可读写
      • **Element.outerHTML**
        • 返回指定元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
      • **Element.className**
        • 返回当前元素的class属性，可读写
      • **Element.classList **
        • 返回当前元素节点的所有class集合
      • **Element.dataset**
        • 返回元素节点中所有的data-*属性。

      • **Element.style**

        • 返回元素节点的行内样式

          1.2.4 节点操作API

      • **Node.appendChild(node)**

        • 向节点添加最后一个子节点
      • **Node.hasChildNodes()**
        • 返回布尔值，表示当前节点是否有子节点
      • **Node.cloneNode(true)**
        • 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
      • **Node.insertBefore(newNode,oldNode)**
        • 在指定子节点之前插入新的子节点
      • **Node.removeChild(node)**
        • 删除节点，在要删除节点的父节点上操作
      • **Node.replaceChild(newChild,oldChild)**
        • 替换节点
      • **Node.contains(node)**
        • 返回一个布尔值，表示参数节点是否为当前节点的后代节点。

          二、事件

          2.1 DOM0事件模型

          起初浏览器处理事件只有原始事件模型，事件处理程序被设置为js代码串作为html的属性值 ```html 

      1. <a name="sfvlL"></a>
      2. ## 2.2 DOM2事件模型
      3. <a name="NUlGp"></a>
      4. ### 2.2.1 事件流
      6. - 阶段一：捕获阶段（capturing）
      7.    - 此阶段事件从Document根节点向下传播到目标节点
      8. - 阶段二：处于目标阶段
      9. - 阶段三：冒泡阶段（bubbling）
      10.    - 此阶段事件从目标节点播回Document根节点，
      11. > 事件流学习网站 [https://domevents.dev/](https://domevents.dev/)
      13. <a name="EHOnC"></a>
      14. ### 2.2.2 事件注册与销毁
      15. ```javascript
      16. target.addEventListener(type, listener[, options]);
      17. target.addEventListener(type, listener[, useCapture]);
      18. /*
      19. 参数解析
      20.  - type:EventType
      21.  - listener:回调函数
      22.  - options
      23.    - capture(Boolean):表示listener是否在事件捕获阶段触发
      24.    - once(Boolean):表示listener是否最多调用一次
      25.    - passive(Boolean):表示listener中不允许调用preventDefault()
      26.              若调用将会忽略并抛出一个控制台警告（可用passive改善滚屏性能）
      27.    - signal(AbortSignal):传入一个信号对象，可与DOM请求进行通信并将其终止
      29.  - useCapture(Boolean):表示是否先于父元素调用listener，默认值false
      30.                        (实则就是捕获阶段调用)
      31. */
      1. target.removeEventListener(type, listener[, options]);
      2. target.removeEventListener(type, listener[, useCapture]);
      3. /* 参数同上 */

      2.3 DOM常用事件

      1. 点击事件：

      onclick：单击事件
      ondblclick：双击事件

      1. 焦点事件

      onblur：失去焦点
      onfocus:元素获得焦点。

      1. 加载事件：

      onload：一张页面或一幅图像完成加载。

      1. 鼠标事件：

      onmousedown鼠标按钮被按下。
      onmouseup鼠标按键被松开。
      onmousemove鼠标被移动。
      onmouseover鼠标移到某元素之上。
      onmouseout鼠标从某元素移开。
      5.键盘事件：
      onkeydown某个键盘按键被按下。
      onkeyup某个键盘按键被松开。
      onkeypress某个键盘按键被按下并松开。
      6.选择和改变
      onchange域的内容被改变。
      onselect文本被选中。
      7.表单事件：
      onsubmit确认按钮被点击。
      onreset重置按钮被点击。