WebAPI

基本认知

作用和分类

作用

使用JS去操作 html 和浏览器

分类

DOM(文档对象模型)，BOM(浏览器对象模型)

什么是DOM

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

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

DOM树

将 html 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

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

DOM对象

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

document 对象

是 DOM 里面提供的一个对象

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

网页所有内容都在document里面

注：1.dom和dom元素是对应关系 2.操作dom对象的本质就是在操作页面dom元素 3.我们所需要做的事情就是通过浏览器提供的api获取到你想要的dom元素，调用浏览器提供的api进行元素的操作，操作dom对象的结果会体现到页面上

获取DOM对象

查找元素DOM元素就是选择页面中标签元素

选择匹配的第一个元素

语法

document.querySelector('css选择器')

参数

包含一个或多个有效的CSS选择器字符串

返回值

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

<div>
    <span>span</span>
    <span>我也是span</span>
    <a href="#" class="mya">我是a</a>
    <h2 id="myh2">我是h2</h2>
</div>
<script>
    // 选择器在css怎么写，在这里就怎么写
    // 如果页面中有多个同样标签，只会匹配到第一个
    let doms = document.querySelector('span')
    doms.style.color = '#ccf';
    let domss = document.querySelector('div h2')
    domss.style.color = 'yellow'
</script>

选择匹配的多个元素

语法

document.querySelectorAll('css选择器')

参数

包含一个或多个有效的CSS选择器字符串

返回值

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

注：小括号里面的参数必须是字符串，也就是必须加引号

<div>
  <span>span</span>
  <span>我也是span</span>
  <a href="#" class="mya">我是a</a>
  <h2 id="myh2">我是h2</h2>
</div>
  <span>我还是span</span>
<script>
  // 获取满足条件的所有元素，返回一个伪数组
  let spans = document.querySelectorAll('span')
  console.log(spans);
  // 伪数组的操作需要遍历
  // 遍历数组，输出数组中的每一项
  for (let i = 0; i < spans.length; i++) {
    console.log(spans[i]);
    spans[i].style.color = '#ccf'
  }
</script>

其它获取DOM元素方法

// 根据 id获取一个元素
document.getElementById()
// 根据 标签获取一类元素 获取页面 所有div
document.getElementByTagName()
// 根据 类名获取元素 获取页面 所有类名为w的
document.getElementByClassName()

设置/修改DOM元素内容

document.write() 方法

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

对象.innerText 属性

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

它不能对内容中的html标签结构进行解析，而是会原样输出

对象.innerHTML 属性

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

可以解析内容中的html标签结构

<div>
    <p>我是p元素</p>
    <span>我是span元素</span>
    <h1>我是h1</h1>
    <script>
        // 如果innerText或者innerHTML没有赋值，那么就是取值
        let div = document.querySelector('div')
        // innerText:获取标签之间的文本内容，标签会被忽略
        console.log(div.innerText);
        // innerHTML：获取标签之间的完整结构
        console.log(div.innerHTML);
    </script>
</div>

随机点名*案例

<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
  // 声明一个数组
  let names = ['刘备', '张飞', '关羽', '黄忠', '赵云']
  // 获取元素
  let btn = document.querySelector('button')
  let span = document.querySelector('Span')
  // 前置知识：为按钮绑定单击事件：单击按钮之后再进行处理
  // 为btn添加单机事件的监听，当用户单机之后，就调用传入的回调函数进行处理
  // click '单击'
  btn.addEventListener('click', function () {
    // 单击按钮之后的业务处理
    // 生成一个随机数
    let random = parseInt(Math.random() * names.length)
    // 根据索引获取名字
    let name = names[random]
    // 将名字渲染到指定的元素中
    span.innerText = name
  })
</script>

设置/修改DOM元素属性

设置/修改元素常用属性

语法

对象.属性 = 值

设置/修改元素样式属性

style操作css

每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。

<body>
  <div></div>
  <button>点啊</button>
  <script>
    // 获取元素
    let btn = document.querySelector('button')
    // 将所需图片放进数组
    let arr = ['b01.jpg', 'b02.jpg', 'b03.jpg', 'b04.jpg']
    // 生成点击事件
    btn.addEventListener('click', function () {
      // 生成随机数
      let index = parseInt(Math.random() * arr.length)

      // 将背景图赋值回body
      document.body.style.backgroundImage = `url(./images/${arr[index]})`
      document.body.style.backgroundRepeat = `no-repeat`

    })
  </script>
</body>

操作类名(className)

className是使用新值换旧值, 它会覆盖掉旧值，如果需要添加一个类,需要保留之前的类名

<style>
    .divborder {
      border: 1px solid #ccc;
    }

    .mydiv {
      width: 400px;
      height: 400px;
      background-image: url(./images/1.jpg);
      background-size: contain;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <button>改背景</button>
  <div class="divborder">我是内容</div>

  <script>
    // 获取元素
    let btn = document.querySelector('button')
    let div = document.querySelector('.divborder')

    btn.addEventListener('click', function () {
      div.className = 'mydiv'
    })
  </script>
</body>

classList

<body>
  <button>添加一个字体大小样式</button>
  <button class="second">移除一个字体大小样式</button>
  <button>切换一个字体大小样式</button>
  <button>判断元素是否有某个样式</button>
  <p class="red">我是百变p元素</p>

  <script>
    let p = document.querySelector('p')


    let btn1 = document.querySelector('button')
    let btn2 = document.querySelector('.second')
    let btn3 = document.querySelector('button:nth-of-type(3)')
    let btn4 = document.querySelectorAll('button')[3]


    btn1.addEventListener('click', function () {
      // classList.add:在之前样式的基础上新增一个新的样式类名，“不影响”元素之前的样式
      p.classList.add('size50', 'underline')
    })


    btn2.addEventListener('click', function () {
      // classList.remove:移除指定名称的样式，不影响元素其它的样式类名
      p.classList.remove('size50')
    })


    btn3.addEventListener('click', function () {
      // classList.toggle:切换元素的样式，如果没有就添加，如果有就移除
      p.classList.toggle('size50')
    })


    btn4.addEventListener('click', function () {
      // classList.contains:判断当前元素是否包含某个指定名称的样式，如果有就返回true，没有便返回false
      let flag = p.classList.contains('size50')
      console.log(flag);
    })
  </script>
</body>

对比className和style,classList的区别

修改大量样式时更方便

修改不多样式的时候方便

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

设置/修改表单元素属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

常见表单属性

value: 值

disabled:禁用

checked:选中的

selected:多选的情况下，选中的

表单元素属性操作

<body>
  <input type="password" class="username" />
  <button class="changeType">变</button>
  <br />

  <input type="checkbox" class="chkAll " />全选
  <div class="list">
    <input type="checkbox" />写代码 <input type="checkbox" />调bug
    <input type="checkbox" />写文档
  </div>
  <button class="getChioce">获取用户选择</button>

  <script>
    // 获取元素
    let changeType = document.querySelector('.changeType')
    let username = document.querySelector('.username')
    // 生成点击事件
    changeType.addEventListener('click', function () {
      // 获取当前输入框type值
      let type = username.type
      // 判断，当属性值等于密码框时，点击变更为文本框，否则变为密码框
      if (type === 'password') {
        username.type = 'text'
      } else {
        username.type = 'password'
      }
    })



    //  获取 全选复选框
    let chkAll = document.querySelector('.chkAll')
    //  获取 列表结构中的复选框
    let chks = document.querySelectorAll('.list input')
    // 为全选复选框添加单机事件
    chkAll.addEventListener('click', function () {
      // 获取当前全选复选框的状态值，选中为true,否则为false
      let state = chkAll.checked
      // 遍历下面的所有复选框，为每个设置checked状态值
      for (let i = 0; i < chks.length; i++) {
        chks[i].checked = state
      }
    })


  </script>
</body>

定时器-间歇函数

作用

每个一段时间重复做一个事情

语法

setInterval(你想执行的操作，间隔时间)

注：间隔时间以毫秒为单位

<body>
  <button>获取验证码</button>
  <script>
    // 获取元素
    let btn = document.querySelector('button')
    // 单击事件绑定
    btn.addEventListener('click', function () {
        // 起始值
      let timeCount = 5
      // 开启定时器
      let timeId = setInterval(function () {
        // 让定时器进行减法操作
        timeCount--
        btn.innerText = `倒计时${timeCount}s`
        btn.disabled = true

        // 判断时间到0时，停止倒计时
        if (timeCount == -1) {
          // 清除定时器
          clearInterval(timeId)
          btn.disabled = false
          btn.innerText = '获取验证码'
        }
      }, 1000)
    })
  </script>
</body>

综合案例

自动切换图片

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 700px;
      height: 320px;
      margin: 100px auto;
      position: relative;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      line-height: 50px;
      background-color: #666;
      color: #fff;
      width: 100%;
      padding-left: 10px;
      font-size: 20px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div>
    <img src="./images/b01.jpg" alt="" />
    <p>第1张图片</p>
  </div>
  <script>
    // 获取元素
    let img = document.querySelector('img')
    let p = document.querySelector('p')
    // 生成索引值
    let index = 1

    setInterval(function () {
      // 索引自增
      index++
      // 判断，当图片轮播到第10张时，回到第一张
      if (index === 10) {
        index = 1
      }
      // 根据索引生成一个图片路径
      let path = `./images/b0${index}.jpg`
      // 将生成的路径赋值给img的src属性
      img.src = path
      // 设置图片的文字信息
      p.innerText = `第${index}张图片`
    }, 2000)
  </script>
</body>

</html>

初识WebAPI