目录

  1. DOM 树, DOM 节点, DOM 对象是什么
  2. 利用 DOM 对象对 DOM 节点进行增删改查操作
  3. 事件绑定
  4. 事件常见类型
  5. 事件对象
  6. 事件冒泡和事件捕获

(一) Dom 树, Dom 节点和 Dom 对象

  1. DOM 树 (见图)
  2. DOM 节点
  3. DOM 对象
    1. 全称 Document object Model, 中文名称文档对象模型
    2. 作用: 用来的元素节点进行操作, 比如修改元素节点的内容, 修改元素节点的样式

(二) Dom 节点操作(增删改查)

2.1 获取 DOM 节点,获取 DOM 节点的属性,样式和内容
  1. 获取 DOM 节点 ```javascript document.getElementById(‘xxx’); //根据id来获取dom节点,xxx是id名,id是唯一的 document.querySelector(‘xxx’); // 根据选择器来获取dom节点(只能获取一个),xxx可以是任意选择器 document.querySelectorAll(); // 根据选择器来获取dom节点(获取全部),xxx可以是任意选择器

dir(xxx) 可以在控制台查看对象的属性

  2. 2. 获取 DOM 节点的属性和样式

(1)获取属性 - 见demo (2)获取样式 - 见demo

  2. 3. 获取 dom 节点的内容

innerHTML 获取内容连同元素节点 innerText 只获取文本内容

  2. <a name="1214a889"></a>
  3. ##### 2.2 添加节点
  5. 1. 创建节点和插入节点
  6. 1. 通过点击事件插入节点
  8. <a name="a50212dc"></a>
  9. ##### 2.3 删除节点
  11. remove()
  13. <a name="0e3e4449"></a>
  14. ##### 2.4 修改节点(内容,样式,属性)
  • 修改内容 节点.innerHTML=xxx; innerText=xxx;
  • 修改样式 节点.style.xxx=xxx; // style是行内样式
  • 修改属性 节点.属性名=xxx; ```

(三)事件绑定

3.1 普通事件绑定(DOM 一级)
  • onxxx
  • xxx.click

3.2 高级事件绑定(DOM 二级) addEventListener

dom一级事件绑定和dom二级事件绑定区别: 同类型事件, 前者绑定多次, 只会执行一次, 后者可以执行多次

3.3 使用 js 触发事件

(四) 事件常见类型

onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个 HTML 元素上移动鼠标
onmouseout 用户从一个 HTML 元素上移开鼠标
onkeydown 用户按下键盘按键
onkeyup 用户松开键盘按键
onload 浏览器已完成页面的加载
oninput 键盘输入事件
touchStart 触摸开始
touchMove 滑动
touchEnd 触摸结束
  1. 更多事件类型
    1. https://www.runoob.com/jsref/dom-obj-event.html

(五) 事件对象

  1. event 对象: 每个事件被触发时,都会产生一个event对象
  2. target 和 currentTarget
    • target表示被触发的元素(比如: 点击事件就是被点击的元素)
    • currentTarget是事件绑定的元素

(六) 事件冒泡和事件捕获

  1. 事件流(事件的传播)
    1. 事件捕获阶段
    2. 目标阶段
    3. 事件冒泡阶段
  2. 事件冒泡应用: 事件委托(托管)
  3. 改造计算器

作业: 完成todo list