webAPI-DOM

目录

  • JavaScript与ECMAScript+
  • DOM
  • 时间对象属性与方法的集合体
  • 定时器函数
  • 案例

1.1-JavaScript与ECMAScript

目标：知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能

  • ECMAScript 是一套语法标准

    • 简称ES

  • 我们之前学的语法其实就是 ECMAScript 里的语法

    • 变量、数据类型、运算等规则都是 ECMAScript 规定的

  • JavaScript 是什么？

    • 遵守 ECMAScript 规则的一套编程语言
    • 严格来讲，ECMAScript 配合浏览器提供的 Web APIs 才称之为 JavaScript

  • Web APIs 是什么？

    • 浏览器提供的一套操作浏览器、页面内容的功能（主要是一些对象和方法 )

1.2-JavaScript和node.js

4.3-day1-webAPI-DOM - 图1

二、DOM

2.1 DOM概念

  1. 什么是DOM

    • 把HTML相关标签当作对象处理

  2. DOM树

    • 把HTML页面当作页面，叫做DOM树脂

  3. DOM节点

    • HTML页面每一个标签叫做DOM节点、元素对象；element

  4. document

    • DOM树 整个文档 对象（属性和方法结合体） { } [ ] 万物皆对象：标签

2.1.1 DOM是什么

目标：能说出DOM是什么

DOM是什么？

DOM是浏览器提供的一套专门用来操作网页内容的功能

  • DOM的核心思想

    • 把网页内容当做对象来处理

  • DOM作用

    • 开发网页内容特效和实现用户交互

  • DOM全称

    • Document Object Model（文档对象模型）

2.1.2 DOM树

目标：能说出DOM树是什么

  • DOM树是什么

    1. 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
    2. 描述网页内容关系的名词
    3. 作用：文档树直观的体现了标签与标签之间的关系

4.3-day1-webAPI-DOM - 图2

2.1.3 DOM节点

目标：能说出DOM节点的类型

  1. DOM节点

    • DOM树里每一个内容都称之为节点

  2. 节点类型

    1. 元素节点

      • 所有的标签 比如 body、 div
      • html 是根节点

    2. 属性节点

      • 所有的属性 比如 href

    3. 文本节点

      • 所有的文本
    4. 其他

2.1.4 document

目标：能说出document对象的作用

  • document

    • 是 DOM 里提供的一个对象

    • 所以它提供的属性和方法都是用来访问和操作网页内容的
       例：document.write()

    • 代表浏览器显示网页内容的区域

    • 网页所有内容都在document里面

    • document 是学习 DOM 的核心 4.3-day1-webAPI-DOM - 图3

2.1 DOM概念总结

目标：知道 DOM 相关的概念，建立对 DOM 的初步认识

  1. DOM是什么？

    • 文档对象模型
    • DOM是浏览器提供的一套专门用来操作网页内容的功能

  2. DOM 树是什么？

    • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
    • 作用：文档树直观的体现了标签与标签之间的关系

  3. DOM 节点是什么？

    • DOM树里每一个内容都称之为节点
    • 常见的DOM 节点类型： 元素节点、属性节点、文本节点等

  4. document 是什么？

    • 是 DOM 里提供的一个对象，用来访问和操作网页内容的

2.2 查找元素节点

目标：能查找元素DOM节点

  • HTML 中任意标签都是【元素类型节点】
  • 所以： 查找元素节点就是选择页面中标签元素
  1. 根据 id 来查找dom元素节点
    1. 语法：document.getElementById('标签的id');
  • 根据id查找标签
  • 传入的id是字符串，记得加引号，直接写id名即可，不需要加 #
  • 返回一个匹配到 ID 的 DOM Element 对象（所有节点都是对象）
  • 找不到会得到null
  • 可以通过对象里面的 nodeType 属性来标识节点类型
  1. // 方法：
  2.         // 翻译：  get获取得到  Element元素  by通过   id：标签唯一标识
  3.         // 作用：获取元素对象
  4.         // 参数：字符串、放入找哪个标签ID值，注意不要选择器，没有#
  5.         // 返回：
  6.         document.getElementById();
  1. 查找html和body元素节点
  1. // html:第二的单词首字母大写，不常用
  2. // console.log(document.documentElement)
  3.         // body
  4.         // console.log(document.body)
  5.         // webAPI：推荐放在body后面

2.3 操作元素节点

目标：能够操作元素节点更改元素的属性和文本内容

提问：操作标签我们都可以做哪些修改？
 标签的属性 比如更换图片修改 img的src 属性
 标签的文本内容

  1. 直接修改元素的属性

语法： 对象. 属性 = 值

  1. 举例说明：
  2.  //1.获取DOM节点：对象
  3.         let img = document.getElementById("pic")
  4.         // 2.操作DOM节点：属性和方法结合体
  5.         //获img.src=取属性？  src alt width  都是DOM节点自带属性名
  6.         //   img.src  imd.id   点语法获取
  7.         //设置属性 ?
  8.         img.src = "./images/b03.jpg";
  9.         img.alt = "啊哈哈哈哈哈";
  10.         img.width = "700";

  1. 通过 setAttribute 方法修改

语法：对象.setAttribute(‘属性’，’值’)


  1.  /*   设置属性方法：DOM节点上带方法
  2.           单词：set 设置  Attribute 属性
  3.           参数：
  4.               第一：设置哪个属性字符串，
  5.               第二：设置的属性值； */
  6.         img.setAttribute("src", "./images/b07.jpg")
  7.         //目前：两个方式功能一样，推荐使用简单  对象.属性名

  1. 修改元素的样式

语法：对象.style.样式属性 = 值

4.3-day1-webAPI-DOM - 图4

  1. //1.获取宽度
  2.   let div = document.getElementById("box")
  3. /*  2.获取
  4.     刚才为什么可以 ? dom : img有这样设置 width = 500
  5.     现在是div: style = "width:30epx;height: 300px;"
  6.      注意: 具体某个屈性名如何是连字符, 转换为驼峰命名规则只能获取行内样式:*/
  7. console.log(div.width, div.style.width, div.style.backgroundColor)
  8. div.style.width = '600px';
  9. //css 属性的 -连接符与js的减运算符
  10. div.style.backgroundColor = '#333';


案例1-随机变化背景案例：

  1. <style>
  2.         body {
  3.             /* 不需要设置宽度，设置背景图有效！ */
  4.             background: url(../代码/images/b01.jpg) no-repeat;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <script>
  10.         //需求：刷新页面，背景图随机换一个
  11.         // 步骤:  1.获取dom节点
  12.         let body = document.body;
  13.         //随机：1-9随机的一个整数
  14.         let i = Math.floor(Math.random() * 9) + 1;
  15.         //2.设置背景图片：
  16.         body.style.background = `url(../代码/images/b0${i}.jpg) no-repeat`;
  17.     </script>
  18. </body>

2.3.2 操作元素文本

目标：能够修改元素的文本更换内容

  1. document.write

    • 只能将文本内容追加到

    • 文本中包含的标签会被解析

      1. //永远都只是追加操作，且只能位置</body>前
      2. document.write( 'Hello world ! ' );
      3. document.write( ' <h3>你好，世界!</h3>')
  1. innerText 属性

  • 将文本内容添加/更新到任意标签位置

  • 文本中包含的标签不会被解析

    1. l /innerText将文本内容添加/更新到任意标签位置
    2. let info = document.getElementById( ' info ')
    3. //intro.innerText =‘嗨~我叫李雷!’
    4. info.innerText = '<h4>嗨~我叫李雷!</h4>'
  1.  //问
  2. let ul = document.getElementById("demo")
  3. ul.innerHTML = "<h2>哈哈大大</h2>"
  4.  console.log(ul.innerText, ul.innerHTML)

操作元素小结

  1. 操作元素属性有哪些方式？

    • 点语法操作属性（推荐） 对象.属性
    • setAttribute(‘属性’, ‘值’)
    • 对象.style.样式名

  2. 操作元素文本有哪些方式？

    • document.write()
    • innterText 不解析标签
    • innerHTML 解析标签

三、时间对象

目标：掌握时间对象，可以让网页显示时间

  • 时间对象：用来表示时间的对象

  • 作用：可以得到当前系统时间

  • 学习路径：

    1. 实例化
    2. 时间对象方法
    3. 时间戳

3.1 实例化

  • 在代码中发现了 new 关键字时，一般将这个操作称为实例化

  • 创建一个时间对象并获取时间

    • 获得当前时间

      let date = new Date( )

  • 获得指定时间

    let date = new Date(‘1949-10-01’)

3.2 时间对象方法

目标：能够使用时间对象中的方法写出常见日期

  • 因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式 | 方法 | 作用 | 说明 | | :—-: | :—-: | :—-: | | getFullYear() | 获得年份 | 获取四位年份 | | getMonth() | 获得月份 | 取值为 0 ~ 11 | | getDate() | 获取月份中的每一天 | 不同月份取值也不相同 | | getDay() | 获取星期 | 取值为 0 ~ 6 | | getHours() | 获取小时 | 取值为 0 ~ 23 | | getMinutes() | 获取分钟 | 取值为 0 ~ 59 | | getSeconds() | 获取秒 | 取值为 0 ~ 59 |

案例2-页面显示时间案例：

  1.  <div id="box"></div>
  2.     <script>
  3.         // 需求：页面某个盒子  显示系统时间
  4.         //  个位数，0-9  双位数
  5.         function fn(num) {
  6.             if (num < 10) {
  7.                 num = '0' + num
  8.             }
  9.             return num;
  10.         }
  11.         //步骤
  12.         //1.得到时间对象
  13.         let time = new Date();
  14.         //2.对象上方法执行，获取对于数据
  15.         let Y = time.getFullYear();
  16.         let M = time.getMonth() + 1;
  17.         M = fn(M);
  18.         let D = time.getDate();
  19.         D = fn(D);
  20.         let h = time.getHours();
  21.         h = fn(h);
  22.         let a = time.getMinutes()
  23.         a = fn(a)
  24.         // 秒
  25.         let t = time.getSeconds()
  26.         t = fn(t)
  27.         let div = document.getElementById("box")
  28.         document.write(`${Y}-${M}-${D}-${h}:${a}:${t}`)
  29.         /* 重点：
  30.             1.学会时间对象方法使用
  31.             2.练习ES6模板字符串
  32.             3.函数封装:
  33.             什么时候用 ? 发现某个代码逻辑在上下文某些地方重复出现;
  34.              关注： 是否需要凌置形参 ? 调用的时侯我是否需要传入实参
  35.                 是否需要设置返回值 ? 调用的时候，是否需要返回一个数据! */
  36.     </script>

3.3 时间戳

目标：能够获得当前时间戳

  • 什么是时间戳

    • 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

  • 三种方式获取时间：

      1. 使用 Date().now()
    • console.log(Date.now())
    • 无需实例化
    • 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

案例：获取时间戳

  1. <div id="time"></div>
  2.     <script>
  3.         let fn = function () {
  4.             let time1 = new Date()
  5.             let time2 = new Date("2021-11-11 0:0:0");
  6.             //2.得到时间戳
  7.             let numb1 = +time1
  8.             let numb2 = +time2
  9.             // 3.时间戳:s
  10.             let cha = (numb2 - numb1) / 1000;
  11.             //天
  12.             let day = Math.floor(cha / (24 * 60 * 60));
  13.             //时:
  14.             let hours = Math.floor(cha / 3600) % 24;
  15.             //分
  16.             let m = Math.floor(cha / 60) % 60;
  17.             //秒：
  18.             let s = Math.floor(cha) % 60;
  19.             //如何设置显示在页面当中
  20.             let div = document.getElementById('time');
  21.             div.innerText = `我是秒男：${day}天-${hours}时-${m}分-${s}秒-马上秒射`;
  22.         }
  23.         fn();
  24.         setInterval(fn, 1000);
  25.     </script>

3.时间对象总结

目标：掌握时间对象，可以让网页显示时间

  1. 实例化时间对象

    • new Date()

  2. 时间对象方法

    • 时间对象里面的方法转换实际所用

  3. 时间戳

    • date.getTime()
    • +new Date()
    • Date.now()
    • 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

四、定时器函数

目标：能够使用定时器函数创建定时任务

  • 学习路径：

    1. 定时器函数介绍
    2. 定时器函数基本使用

4.1 定时器函数介绍

目标：能够说出定时器函数在开发中的使用场景

  • 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码

  • 例如：网页中的倒计时

  • 要实现这种需求，需要定时器函数

4.2 定时器函数使用

目标：能够使用定时器函数重复执行代码

  1. 开启定时器
    1. **setInterval**(函数，间隔时间）
  • 作用：每隔一段时间调用这个函数
  • 间隔时间单位是毫秒

案例：毕业倒计时

  1. 关闭定时器
    1. let 变量名 = setInterval(函数，间隔时间)
  1. clearInterval(变量名)

一般不会刚创建就停止，而是满足一定条件再停止

案例4.1:倒计时效果

  1.  // 需求：1.console 输出 123456
  2.          let index = 0
  3.          let fn = function () {
  4.              index++
  5.              console.log(index)
  6.          }
  7.          setInterval(fn,1000)
  10.         //2.1-9当index数值10的时候，回到0，打印1
  11.         let index = 0
  12.         let fn = function () {
  13.             index++;
  14.             if (index == 10) {
  15.                 index = 1;
  16.             }
  17.             console.log(index)
  18.         }
  19.         setInterval(fn, 500)

案例4.2：网页轮播图效果

  1. <img src="../代码/images/desktop_1.jpg" id="pic" width="50%">
  2. let index = 0;
  3.         let fn = function () {
  4.             index++;
  5.             //1.index： 1-9
  6.             if (index == 10) {
  7.                 index = 1;
  8.             }
  9.             //2.设置图片，找到图片，过去dom节点
  10.             let img = document.getElementById('pic')
  11.             //3.设置图片地址
  12.             img.src = `../代码/images/desktop_${index}.jpg`
  13.         }
  14.         fn();
  15.         setInterval(fn, 2000)

四、定时器函数小结

  1. 定时器函数有什么作用？

    • 可以根据时间自动重复执行某些代码

  2. 定时器函数如何开启？

    • setinterval(函数名, 时间)
  3. 定时器函数如何关闭？
    1.  let 变量名 = setInterval(函数，间隔时间)
    2.  clearInterval(变量名)

案例4.3-定时器关闭

  1.  // 需求2:5s后重试
  2.         let index = 5
  3.         let timer;
  4.         let fn = function () {
  5.             index--;
  6.             //1.获取DOM
  7.             let btn = document.getElementById("btn")
  8.             // 2.设置文本字
  9.             btn.innerText = `${index}s后重试`
  10.             //3.判断当index 不能继续往下走,停止定时器;
  11.             if (index == 1) {
  12.                 clearInterval(timer)
  13.             }
  14.         }
  15.         timer = setInterval(fn, 1000);