目录

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

  6. 事件冒泡和事件捕获

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

  7. DOM 树 (见图)

  8. DOM 节点

  9. DOM 对象

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

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

      2.1 获取 DOM 节点,获取 DOM 节点的属性,样式和内容

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

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

  2. 2. 获取 DOM 节点的属性和样式
  3. ```javascript
  4. (1)获取属性 - 见demo
  5. (2)获取样式 - 见demo

  1. 获取 dom 节点的内容

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

    2.2 添加节点

  2. 创建节点和插入节点

  3. 通过点击事件插入节点
    2.3 删除节点
    remove()
    2.4 修改节点(内容,样式,属性)
    1. - 修改内容 节点.innerHTML=xxx; innerText=xxx;
    2. - 修改样式 节点.style.xxx=xxx;  // style是行内样式
    3. - 修改属性 节点.属性名=xxx;

    (三)事件绑定

    3.1 普通事件绑定(DOM 一级)
  • onxxx
  • xxx.click
    3.2 高级事件绑定(DOM 二级) addEventListener
    dom一级事件绑定和dom二级事件绑定区别: 同类型事件, 前者绑定多次, 只会执行一次, 后者可以执行多次
    3.3 使用 js 触发事件

    (四) 事件常见类型

    第7节 Dom 对象和BOM对象

  1. 更多事件类型

    1. https://www.runoob.com/jsref/dom-obj-event.html

    (五) 事件对象

  2. event 对象: 每个事件被触发时,都会产生一个event对象

  3. target 和 currentTarget

    • target表示被触发的元素(比如: 点击事件就是被点击的元素)
    • currentTarget是事件绑定的元素

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

  4. 事件流(事件的传播)

    1. 事件捕获阶段
    2. 目标阶段
    3. 事件冒泡阶段
  5. 事件冒泡应用: 事件委托(托管)

  6. 改造计算器

    Bom 对象

  7. location.href 获取浏览器地址 (window.location)

  8. location.href = ‘http://www.baidu.com‘ // 跳转到百度
  9. location.href = ‘http://www.baidu.com?username=huruqing‘
    // 跳转到百度的时候,加上参数 username=huruqing
  10. setTimeout 延迟
  11. setInterval 定时器和清除定时器
  12. navigator: userAgent 用来判断用户在使用什么设备 ```javascript <!DOCTYPE html>

正在判断用户设备……

  1. <script>
  2.     // 判断用户使用设备
  3.     //js判断是否移动端
  4.     function fIsMobile() {
  5.         return /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent);
  6.     }
  8.     setTimeout(function() {
  9.         var res = fIsMobile();
  10.         if (res) {
  11.             location.href = './mobile.html';
  12.         } else {
  13.             location.href = './pc.html';
  14.         }
  15.     }, 3000);
  16. </script>

  2. 7. history对象  浏览器历史对象
  3. ```javascript
  4. history.back();
  5. history.forward();
  6. history.go();