web API (01)

web API 基本认识

作用和分类

作用就是使用Js去操作html和浏览器
分类 DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM（文档对象模型）是用来呈现以及与任意HTML或者XML文档交互API
白话：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用
- 开发网页内容特效和实现用户交互

DOM树

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

DOM 对象

DOM对象：浏览器根据HTML标签生成的JS对象
1. 所有的标签属性都可以在这个对象上面找到
2. 修改这个对象的属性会自动映射到标签身上
DOM的核心思想
1. 把网页内容当作对象来处理
document 对象
1. 是DOM 里提供的一个对象
2. 所以它提供的属性和方法都是用来访问和操作网页内容的
3. 网页所有内容都在 document 里面

获取DOM元素

查找获取DOM对象

查找元素DOM元素就是选择页面中标签元素
1. 根据css 选择器来获取DoM 元素
2. 其他获取DOM元素方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>asdass</div>
    <div>646464</div>
    <button>啊那妞</button>
    <script>
        let buttonDom = document.querySelector('div')
        console.dir(buttonDom)



        /* 
        小结
        1 想要获取页面的标签  可以通过 document.querySelector（选择器）
        2 querySelector  只能够获取第一个满足条件的标签
        3 如果选择器找不到元素 querySelector 只会返回 null
        4 如果我们要输出和打印 dom 元素
            不要在使用   console.log
            改为  使用   console.dir
        */
    </script>
</body>
</html>

动态修改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>07-动态修改dom元素内容.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>

    <script>
      /* 
      1 获取 输入框输入的同学的名称
      2 把名字 显示到 h2标签中 
        1 先获取h2标签对应的dom元素
        2 使用代码修改文本内容 
          dom元素.innerText = "修改的内容 "
       */

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

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

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

案例

动态修改元素用户的名字随机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>今天天气好 ，约个朋友去玩一下</h1>
    <h2></h2>

    <script>
        let userName = ['赵四','刘二麻子','王五','李四','张三']
        function getH2(min,max) {
            return Math.round(Math.random()*(max-min) + min)

        }
        let i = getH2(0,userName.length - 1)
   
        let h2Dom = document.querySelector('h2')
        h2Dom.innerText = userName[i]
    </script>
</body>
</html>

获取多个DOM元素

querySelectorAll 不管你的选择器写对与否，返回值都是数组
querySelector
1. 能找到返回 DOM元素 DOM对象
2. 找不到了返回NUll

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
    <script>
      // querySelector  只能获取第一个符合要求的li标签
      // let li =document.querySelector('li')

      // 获取所有的li标签  返回一个数组
      let liDom = document.querySelectorAll("li");

      //数组就可以和循环搭配
      for (let index = 0; index < liDom.length; index++) {
        //文本
        liDom[index].innerText = "这里就是li标签" + index;
      }
    </script>
  </body>
</html>

其他获取DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="nav">dfg</div>
    <p>gdf</p>
    <div class="ccc">fgd</div>
    <script>
        //根据id来获取  一个Dom
        let nav =document.getElementById('nav')
        console.log(nav);
        //根据标签来获取   一组dom
        let ppcc= document.getElementsByName
        console.log(ppcc);
        //根据 类名来获取元素  一组元素
        let divs = document.getElementsByClassName('ccc')
        console.log(divs)
    </script>
</body>
</html>

三种设置文本内容

document.write 功能弱只能把标签写在 body 标签上面
innerText 只能设置文本，不能解析 html 字符串、
innerHTML 可以设置文本也可以解析html字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>

        document.querySelector('li:nth-child(2)').innerText = `<button>随便修改</button>`
        

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


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

案例

刷新随机生成图片

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机生成图片</title>
</head>
<body>
    <img src="" alt="">
</body>
<script>
    let imgs = [
        './壁纸/1.jpg','./壁纸/2.jpg','./壁纸/3.jpg','./壁纸/4.jpg'

    ]
    function imgHtml(min,max) {
        return Math.round(Math.random() * (max-min) +min)

    }
    let i = imgHtml(0,imgs.length-1)
    let imgg =document.querySelector('img')
    imgg.src = imgs[i]

</script>
</html>

获取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>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');
      // 2 开始修改 
      // div.style.fontSize="100px";
      // div.style.color="yellow";
      // div.style.backgroundColor="pink";
      // div.style.height="300px";
      // div.style.width="400px";

      // 会出现 单词写错或者 值写错 写漏
      // 那段代码没有效果 就去看那段代码 

      div.style.fontSize="100px";
      div.style.color="yellow";
      div.style.backgroundColor="pink";
      div.style.height="300px";
      div.style.width="400px";
    </script>
  </body>
</html>

案例

body标签里面随机显示颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function bgc(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }
      let color1 = bgc(0, 255);
      let color2 = bgc(0, 255);
      let color3 = bgc(0, 255);

      document.body.style.backgroundColor = `rgba(${color1},${color2},${color3})`;
    </script>
  </body>
</html>

className

会清空这个DOM元素旧的所有的类然后在单独添加新的类
如果想要同时设置多个 class 以空格做分割

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }
        .box1{
            margin: 100px auto;
            
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let name = document.querySelector('div')
        name.className = 'box box1'
    </script>
</body>
</html>

classList操作类

<!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>

案例

背景图片随机显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-image: url('./壁纸/1.jpg');
        }
        .box1{
            background-image: url('./壁纸/2.jpg');
        }
        .box2{
            background-image: url('./壁纸/3.jpg');
        }
        .box3{
            background-image: url('./壁纸/4.jpg');
        }
        .box4{
            background-image: url('./壁纸/5.jpg');
        }
    </style>
</head>
<body>
    
    <script>
        let name = ['box','box1','box2','box3','box4']
        function imgg(min,max) {
            return Math.round(Math.random()*(max - min)+min)
        }
        let i = imgg(0,name.length -1)
        document.body.classList.add(name[i])
    </script>
</body>
</html>

定时器 -间歇函数

定时器函数的介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

定时器函数可以开启和关闭定时器

开启定时器
- setInterval（函数，间隔时间）
- 作用每隔一段时间调用这个函数
- 间隔时间单位是毫秒

<script>
        // // 函数 负责  定时执行的业务
        // function name() {
        //     console.log('前端程序员头发就是多')
        // }
        //每隔一秒执行一次函数
        //时间单位  毫秒 1000毫秒 = 1秒
        // setInterval(name,1000)



        //其他模样的写法
        // setInterval（匿名函数 ， 1000）
        setInterval(function(){
            console.log('头发稀疏');
        },1000)
    </script>

关闭定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let index = 0
        let IDD= setInterval(function() {
            console.log('追女孩子');
            index++
            if (index===50) {
                // 停止定时器
                clearInterval(IDD)
            }
        },100)
    </script>
</body>
</html>

web API （01）

web API (01)

web API 基本认识

作用和分类

什么是DOM

DOM树

DOM 对象

获取DOM元素

查找获取DOM对象

动态修改DOM元素

案例

获取多个DOM元素

其他获取DOM元素

三种设置文本内容

案例

获取DOM元素

案例

className

classList操作类

案例

定时器 -间歇函数

定时器函数的介绍

定时器函数可以开启和关闭定时器

思维导图

web API （01）

web API (01)

web API 基本认识

作用和分类

什么是DOM

DOM树

DOM 对象

获取DOM元素

查找 获取DOM对象

动态修改DOM元素

案例

获取多个DOM元素

其他获取DOM元素

三种设置文本内容

案例

获取DOM元素

案例

className

classList操作类

案例

定时器 -间歇函数

定时器函数的介绍

定时器函数可以开启和关闭定时器

思维导图

查找获取DOM对象