Web APIs 第一天

1.Web API认知

1.作用

① 就是使用 JS 去操作 html 和浏览器

2.分类

①DOM (文档对象模型)

②BOM（浏览器对象模型）

3.如图:

1648990253420

2.DOM对象

①（文档对象模型）用来呈现以及与任意 HTML 或 XML文档交互的API

②白话文: 浏览器提供的一套专门用来 操作网页内容 的功能

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

3. DOM树

①将 HTML 文档以树状结构直观的表现出来，称为文档树或 DOM 树

②文档树直观的体现了标签与标签之间的关系

③如图:

1648990740703

4.DOM对象（重要）

①浏览器根据html标签生成的 JS对象

②DOM的核心就是把内容当对象来处理

③案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-获取dom对象.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>div元素123</div>
    <div>div元素456</div>
    <input type="text" class="iinn" />
    <script>
      /* 
      dom对象 是浏览器自动帮我们创建好了  
      1 div标签也会被 浏览器自动生成一个dom对象
      2 input 标签 也会被 浏览器 自动生成一个dom对象 

      3 获取下 dom对象
       */

      // document.querySelector("你要获取哪个dom元素呀，这个dom元素的选择器告诉我")
      // document.querySelector("选择器就是指学习过css选择器")

      // let divDom = document.querySelector('div');
      // dom对象 应该也是 {属性名:属性值}
      // console.log(divDom); // <div>div元素</div>

      // console.log 如果输出的是一个 dom对象，就把标签的模样显示出来
      // 我们在输出打印 dom对象的时候 不再使用 console.log , console.dir()
      // console.dir(divDom); // <div>div元素</div>

      // 我想要获取一下 input标签的 dom对象
      let inputDom = document.querySelector('div');// 找不到元素 输出 null 

      console.dir(inputDom);


    </script>
  </body>
</html>

5.document 对象

①是 DOM 里提供的一个对象

②它提供的属性和方法都是用来访问和操作网页内容的

③例：document.write( )

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

2.获取DOM对象

1.单元素

1.语法：

document.querySelector('css选择器')

2.返回值：

①CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-动态修改dom元素内容.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>

    <script>

      let userName = prompt('请输入你想邀约的同学的名称');

      let h2Dom = document.querySelector('h2');

      // h2标签中的文字 就等于 userName
      h2Dom.innerText = userName;
    </script>
  </body>
</html>

2.多元素

1.语法：

document.querySelectorall('ul li')

2.返回值：

①CSS选择器匹配的NodeList 对象集合

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-获取多个dom元素.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div>123</div>
    <script>
      /* 
      querySelectorAll 不管你的选择器写对与否，返回值都是数组 
      querySelector  
        1 能找到 返回 dom元素 dom对象
        2 找不到了  返回null 
      
       */

      // querySelector 只能获取第一个符合要求的li标签
      // let li = document.querySelector('li');
      console.log( document.querySelector("button") );
    </script>
  </body>
</html>

4.注意:

①querySelectorAll() 可以选择多个元素 , 得到的是伪数组，需要遍历得到每一个元素

②css选择器必须是字符串，也就是必须加引号

3.修改DOM元素内容

1.document.write()

①只能将文本内容追加到前面的位置

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

③例如:

//只能位置 <body>  前
document.write('Hello World!');
document.write('<h3>你好,世界!</h3>')

2.对象.innerText 属性

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

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

3.nerHTML 属性

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

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

4.三种文本内容属性案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-3种设置文本内容的方式.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      //  以后就很少用了 document.write 功能弱 只能把标签写在  /body  标签上面
      // document.write
      document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button> ';


      document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> ';

      /* 
      3 种实现在标签中写 动态设置文本

      1  document.write 只能在body标签的中写 以后 很使用它
      2  innerText 只能设置文本，不能解析 html字符串
      3  innerHTML 可以设置文本 也可以解析html字符串 
      
       */

    </script>
  </body>
</html>

4.修改元素常用属性

1.常用属性

①可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片

②属性： href、title、src

③语法:

对象.属性 = 值

④案例:随机显示图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>13-随机显示图片</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <img src="" alt="" />
    <script>
      let userNames = [
        './images/001.png',
        './images/002.png',
        './images/03.png',
        './images/04.png',
      ];
      let index = Math.round(Math.random() * 3);

      let img = document.querySelector('img');
      img.src = userNames[index];
    </script>
  </body>
</html>

5.修改元素样式属性

1.style

1.语法:

对象.style.样式属性 = 值

2.注意：

①修改样式通过style属性引出

②如果属性有 - 连接符，需要转换为小驼峰命名法

③赋值的时候，需要的时候不要忘记加css单位

3..案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>14-设置元素样式.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>普通的元素</div>

    <script>
      // 1 获取dom元素
      let div = document.querySelector('div');
 
      div.style.fontSize="100px";
      div.style.color="yellow";
      div.style.backgroundColor="pink";
      div.style.height="300px";
      div.style.width="400px";
    </script>
  </body>
</html>

2.className

1.语法:

//active  是css类名
元素.className = 'active'

2.注意:

①可以同时修改多个样式

②直接使用 className 赋值会覆盖以前的类名

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-className.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 100px auto;
      }
      .redCls{
        border-radius: 50%;
        height: 400px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div ></div>
    <script>  

      // js的方式来动态添加上这个class
      let div = document.querySelector('div');
      // 通过 className 来设置类名即可

      // 同时设置两个类上去 
      div.className = 'box redCls';
    </script>
  </body>
</html>

3.classList

1.语法:

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

2.注意:

①classList 是追加和删除不影响以前类名

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-classList操作类.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .d1 {
        background-color: aqua;
      }
      .d2 {
        height: 300px;
      }
      .d3 {
        width: 400px;
      }
      .d4 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="d1 d4">123</div>

    <script>
      // 添加一个class
      let div = document.querySelector('div');

      // div.className="d2";
      // classList 添加一个类
      div.classList.add("d2","d3","d4");
      // div.classList.add("d2");
      // div.classList.add('d3');

      // 单独来指定移除一个class
      div.classList.remove("d2","d3")

      // 切换 （如果本来有，那我就移除  ， 如果本来没有，那我就添加）
      div.classList.toggle("d4")
    </script>
  </body>
</html>

6.定时器-间歇函数

1.开启定时器

1.语法:

setIntervar(函数,间隔时间)

2..作用：

①每隔一段时间调用这个函数

②间隔时间单位是毫秒

3.注意：

①函数名字不需要加括号

②定时器返回的是一个id数字

4.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>19-定时器的基本使用.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 函数 负责 定时执行的业务
      // function repeat() {
      //   console.log('前端程序员，头发多');
      // }

      // 每隔一秒执行一次函数
      // 时间单位 毫秒  1000毫秒=1秒
      // setInterval(repeat, 1000);

      // 其他模样的写法
      // setInterval(匿名函数,1000);
      setInterval(function(){
        console.log("头发没有啦");
      },1000);

    </script>
  </body>
</html>

2. 关闭定时器

1.语法:

let 变量名 = setIntervar(函数,间隔时间)
clearIntervar(变量名)

2.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>20-清除定时器.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 开启了一个定时器 会返回 定时器id
      let index = 0;

      // 创建定时器的同时 返回了定时器id
      let timeId = setInterval(function () {
        index++;
        console.log('开始追了', index);
        // 判断是否满足条件了
        if (index === 30) {
          // 放弃 没有缘分
          clearInterval(timeId);
        }
      }, 100);
    </script>
  </body>
</html>

Web Apls 第一天

Web APIs 第一天

1.Web API认知

1.作用

2.DOM对象

3. DOM树

4.DOM对象（重要）

5.document 对象

2.获取DOM对象

1.单元素

2.多元素

3.修改DOM元素内容

1.document.write()

2.对象.innerText 属性

3.nerHTML 属性

4.三种文本内容属性案例

4.修改元素常用属性

1.常用属性

5.修改元素样式属性

1.style

2.className

3.classList

6.定时器-间歇函数

1.开启定时器

2. 关闭定时器