WebApis---DOM的初识及使用作用：就是使用JS去操作html和浏览器分类:DOM（文档对象模型）、BOM（浏

## WebApi的基本认识

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

什么是DOM

DOM（Docunment Object Model--文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
通俗来讲就是：DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM对象

DOM对象：浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想
把网页内容当作对象处理

document 对象
是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例如：document.write（）
网页所有内容都在document里面

获取DOM对象

    <div>
      <span>span</span>
      <span>我也是span</span>
      <a href="" class="mya">我是a</a>
      <h2 id="myh2">我是h2</h2>
    </div>

想要使用api方法交互网页的话，要先会获取元素。

1.使用语法--获取一个元素的方法 let 元素对象 = document.querySelector（'选择器'）

2.参数： 包含一个或多个有效的css选择器字符串

3.返回值： css选择器匹配的第一个元素，一个HTMLElement对象，如果没有匹配到，则返回null。***划重点

4.只能获取满足条件的第一个元素

5.如果能够获取到则返回当前元素对象，这个对象可以直接进行dom对象操作。

使用方法--获取多个元素的方法

1.语法： document.querySelectorAll('css选择器')

2.参数： 包含一个或多个有效的css选择器字符串

3.返回值： css选择器匹配的NodeList 对象集合。也就是伪数组，需要注意的是，这种伪数组不能作为dom元素直接操作，伪数组内每一个成员都是dom元素，所以伪数组一般需要先遍历再使用

4.如果获取失败，返回的是一个空的伪数组。而不是null，这个需要注意。

其他获取元素的api

1.document.getElementsByClassName('box') 此api方法可以获取到所有拥有类样式名称为box的元素

2.document.getElementByTagName('div') 此api方法可以获取到所有的div标签

3.document。getElementById('mybox') 此api方法可以获取到第一个符合条件的拥有此id名的元素。如果id重复也只能获取到第一个。

元素内容的操作

内容的操作有下面两种api方法

1.innerText操作方法

语法是元素.innerText = '值'

他会覆盖元素之间的所有内容，且他不会解析标签结构，如果内容中有标签结构的话，会将标签结构原样输出。如：span.innerText = 'abc<hr>'

会直接输出含有`<hr>`标签的字符串

2.innerHTML操作方法

语法是元素.innerHTML = '值'

同样的，这个方法也会覆盖元素之间所有的内容，但是他会识别出值内容中的HTML标签，并解析出来，所以，如果值内容中本身含有完整的HTML标签的话，通过上述方法输出的就是不含标签的内容字符串。

使用场景： 1.如果值内通中没有网页结构，可以随意使用上述标签。 2.如果有值内容中有网页结构，且要解析网页结构，就只能使用innerHTML 3.需要注意的是，上述两个标签的值都会将元素本身的内容覆盖掉。

案例

随机点名书写页面静态结构

  <body>
    <button>随机抽取</button>
    <span>这是渲染位置</span>

      let names = ['张三', '张四', '张六', '张降']

然后获取到页面结构的元素

let btn = document.querySelector('button')
let span - document.querySelector('span')

绑定一个点击事件

btn.addEventListener('click',function(){
    //先生成随机数
    let index = parseInt(Math.random() * names.length)
    //再获取一个名字，利用上面定义的变量形成的下标获取名字内容的数组
    let name = names[index]
    //给元素赋值
    span.innerHTML = name
})

案例完成

元素的属性的赋值

元素属性的操作方式只适用于内置属性
内置属性：元素本身拥有的属性语法：p.idd = '我是p元素' ing.src = './inages/1.jpg'

    <button>点击</button>
    <input type="text" value="aaa"/>
    //获取上述两个元素
    let button = document.querySelector('button')
    let input = document.querySelector('input')
    //绑定一个点击事件
    button.addEventListener('click',function(){
        input.value = '这是默认值'
    })

案例分享

单击按钮随机显示不同的图片首先是静态结构

  <button>单击随机显示图片</button>
  <img src="" alt="" />

然后获取一个图片路径的数组

let imgs = ['01','02','03','04']

再获取页面元素

let button = document.querySelector('button')
let img = document.querySelector('img')

为button这个按钮绑定一个点击事件

button.addEventListener('click',function(){
    //每次单击按钮，都要重新生成随机数，生成一个数组的下标。
    let index = parseInt(Math.random() * imgs.length)
    img.src = `./images/${imgs[index]}.jpg`
})

案例结束

元素的样式操作

元素的style是用于设置行内样式我门可以设置多个样式属性 style是所有样式集合，它是一个对象，所以我门是为style对象中的某个样式属性进行赋值语法：元素.sytle.样式属性 = '样式值' p.style.color = 'red'

PS:如果样式属性值需要单位，那么在设置的时候也要带单位 p.style['funt-size'] = '40px' p.style.textDecoration = 'line-through'

案例分享

随机切换元素的背景 1.静态结构及样式 2.获取元素 3.绑定点击事件

    <style>
    div {
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      background-image: url(./images/1.jpg);
      background-size: contain;
    }
  </style>
</head>
<body>
  <button>点我啊</button>
  <div></div>

  <script>
    let btn = document.querySelector('button')
    let div = document.querySelector('div')

    btn.addEventListener('click', function() {
      let index = parseInt(Math.random() * 4) + 1
      div.style.backgroundImage = `url(./images/${index}.jpg)`
    })
  </script>
</body>

上述案例同样可以用数组组成图片路径，然后通过生成数组随机数的下标来将数组添加到元素样式内。

元素的样式类名操作

可以通过api方法为元素添加类名。获取元素后，通过className来添加类名。

因为class为关键字，所以要使用className添加进去。

className的缺点是会覆盖之前的类名。往往在使用的过程中并不知道之前的类名。当然，如果你能确定此举不会造成额外的影响，那么大胆使用。

既然上述有这样的问题存在，那么下面介绍另一种较为方便的api方法classList

它有几种常用的api

classList.add
classList.remove
classList.toggle
classList.contains

1.classList.add 可以新增追加类名，并不会覆盖之前的类名，并且可以同时增加多个。

2.classList.remove 可以删除选中的样式，可以选多个。

3.classList.toggle 可以理解为替换，只可以一次选中一个，如果本身就存在，就会删除该样式，如果不存在，则添加该样式上去

4.classList.contains 是一种判断方法，判断该样式是否存在在该元素内，如果存在，则返回ture，如果不存在，返回false

表单元素属性操作

这里用一个案例来演示表单选项中，常见多选框中，会有一个选项，选中就将多选框中的内容全都选中。

静态结构

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

获取及全选样式

// 实现全选和全不选
    let chkAll = document.querySelector(".chkAll");
    let chks = document.querySelectorAll("div > input");
    chkAll.addEventListener("click", function () {
      // 获取当前全选复选框的状态
      let state = chkAll.checked;
      // 为下面三个复选框设置状态 为 全选复选框的状态
      chks.forEach(function (ele) {
        // 为复选框设置checked属性值
        ele.checked = state;
      });
    });

定时器的介绍及使用

setInterval(需要执行的函数，间隔时间)：可以每间隔指定的时间重复执行指定的函数

特点：定时器的函数不会立刻执行，而是间隔时间之后再执行第一次，时间以豪秒做为单位

      // setInterval(function() {
      //   console.log('还早')
      // }, 5000)

那么如何关闭定时器呢，就需要用到下面的语法

首先为定时器定义一个句柄timeId

      // 接收定时器的标识--句柄
      let timeId = setInterval(function() {
        span.innerText = count + '秒'
        count--
      }, 1000)

为关闭定时器绑定一个单击事件

      // 停止定时器
      no.addEventListener('click', function() {
        // 停止定时器
        // clearInterval(标识)
        clearInterval(timeId)
      })

同样的也要为重新启动绑定一个单击时间，定时器不能暂停，只有开始跟停止。

      // 重新开户定时器
      // 定时器不能暂停，只有开户和停止
      go.addEventListener('click', function() {
        timeId = setInterval(function() {
          span.innerText = count + '秒'
          count--
        }, 1000)
      })

倒计时案例分享

  <body>
    <input type="button" value="发送验证码" />

    <script>
      let btn = document.querySelector("input");
      btn.addEventListener("click", function () {
        let count = 5;
        // 禁用按钮
        btn.disabled = true;
        let timeId = setInterval(function () {
          btn.value = count + "秒之后重新发送";
          count--;

          if (count < 0) {
            // 停止定时器
            clearInterval(timeId);
            // 将按钮的文本修改回来
            btn.value = "发送验证码";
            // 重新启用按钮
            btn.disabled = false;
          }
        }, 1000);
      });
    </script>
  </body>

轮播图案例

    <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>
      // 1.获取元素
      let img = document.querySelector('img')
      let p = document.querySelector('p')

      let index = 1

      setInterval(function() {
        index++
        if (index > 9) {
          index = 1
        }
        img.src = `./images/b0${index}.jpg`
        p.innerHTML = `第${index}张图片`
      }, 1000)
    </script>
  </body>

WebApis---DOM的初识及使用

什么是DOM

DOM对象

获取DOM对象

其他获取元素的api

元素内容的操作

会直接输出含有<hr>标签的字符串

案例

元素的属性的赋值

案例分享

元素的样式操作

案例分享

元素的样式类名操作

表单元素属性操作

定时器的介绍及使用

倒计时案例分享

轮播图案例

会直接输出含有`<hr>`标签的字符串