一、Web API 基本认知

1. 作用和分类

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

2. 什么是DOM

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

3. DOM树

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

4. DOM对象（重要）

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

二、获取DOM对象

01-获取元素-querySelector

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

    <script>
      // 获取满足条件的第一个元素
      // 选择器：以前怎么写现在也怎么写：id,类，标签，属性选择，伪类选择器.....
      // let 元素对象 = document.querySelector('选择器')
      // 1.只能获取满足条件的第一个元素
      // 2.如果能够获取到则返回当前元素对象,这个对象可以直接进行dom对象,如果没有获取成功则返回null

      let span = document.querySelector('span')
      span.style.color = 'red'
      let a = document.querySelector('.mya')
      let myh2 = document.querySelector('#myh2')
      console.log(a)
      console.log(span)
      console.log(myh2)
    </script>
  </body>

02-获取元素-querySelectorAll

<body>
    <div>
      <span>span</span>
      <span>我也是span</span>
      <a href="" class="mya">我是a <span>广州黑马程序员中心</span></a>
      <h2 id="myh2">我是h2</h2>
    </div>
    <span>我还是span</span>

    <script>
      // 获取页面中的所有的span
      // querySelectorAll：可以获取满足条件的所有元素，返回一个伪数组
      // 这种伪数组不能做为dom元素直接操作
      // 伪数组中的每一个成员都是dom元素
      // 所有伪数组一般需要先遍历再使用

      // 如果获取失败，返回一个空的伪数组
      let spans = document.querySelectorAll('span')
      console.log(spans) // NodeList(4) [span, span, span, span]

      spans.forEach(function(ele, index) {
        console.log(ele, index)
        ele.style.color = 'red'
      })
    </script>
  </body>

03 获取元素补充说明

<body>
    <ul class="nav">
      <li>我的首页</li>
      <li>产品介绍</li>
      <li>联系方式</li>
    </ul>

    <ul class="nav2">
      <li>我的首页2</li>
      <li>产品介绍3</li>
      <li>联系方式4</li>
    </ul>
    <script>
      // 获取nav2下面的所有的li元素
      // let lis = document.querySelectorAll('.nav2 li')
      // console.log(lis)

      // 先获取nav2元素，再获取它的li元素
      let nav2 = document.querySelector('.nav2')
      console.log(nav2)
      // 结论：也可以通过某个dom元素对象调用query....方法
      let lis = nav2.querySelectorAll('li')
      console.log(lis)
    </script>
  </body>

04-其它获取元素的api

<body>
    <span class="mya">span</span>
    <span>我也是span</span>
    <a href="" class="mya">我是a</a>
    <a href="" class="mya">我也是a</a>
    <h2 id="myh2">我是h2</h2>
    <h2 id="myh2">我也是h2</h2>
    <input type="text" value="内容" />

    <script>
      // 获取所有拥有类样式名称为mya的元素
      let allA = document.getElementsByClassName('mya')
      console.log(allA)

      let allSpan = document.getElementsByTagName('span')
      console.log(allSpan)

      // 如果id重复也只能获取到第一个
      let myh2 = document.getElementById('myh2')
      console.log(myh2)
    </script>
  </body>

三、设置/修改DOM元素内容

05-元素内容的操作

<body>
    <div>
      <button>点我啊</button>
      <h2>
        我是DOM
        <span>修改DOM元素内容</span>
      </h2>
    </div>
    <script>
      // 为span元素赋值
      // 1。获取元素
      let button = document.querySelector('button')
      let span = document.querySelector('span')

      button.addEventListener('click', function() {
        // 2 innerText操作
        // 元素.innerText = '值'
        // 2.1.会覆盖元素之间的所有内容
        span.innerText = 'abc'
        // 2.2 它会不会解析标签结构，会将标签结构原样输出
        span.innerText = 'abc<hr>'

        // 3.innerHTML操作
        // 元素.innerHTML = '值'
        // 2.1.会覆盖元素之间的所有内容
        span.innerHTML = 'abc'
        // 2.2 它会解析网页标签
        span.innerHTML = 'abc<hr>'
      })

      // 使用选择
      // 1.如果没有网页结构，你随意
      // 2.如果有网页结构，且要解析网页结构，只能使用innerHTML
    </script>
  </body>

06-随机点名并渲染在页面的某个位置

<body>
    <button>随机抽取</button>
    <span>这是渲染位置</span>
    <script>
      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
      })
    </script>
  </body>

06-元素的内容的获取

<body>
    <div>
      <button>点我啊</button>
      <h2>
        我是DOM
        <span>aa</span>
      </h2>
    </div>
    <script>
      // let age = 20
      // age = 30 // 赋值
      // console.log(age); // 获取age的值进行打印输出

      // 为span元素赋值
      // 1。获取元素
      let button = document.querySelector('button')
      let h2 = document.querySelector('h2')

      button.addEventListener('click', function() {
        // 修改内容，设置内容和删除内容都是相同的操作
        // span.innerHTML = ''
        // 获取标签之间的内容
        // 在js中，对于属性的使用，没有赋值就是取值
        // innerText在获取标签之间的内容时，只能获取到文本内容，过滤掉标签结构
        console.log(h2.innerText)
        // innerHTML在获取标签之间内容的时候，可以获取到完整的html结构
        console.log(h2.innerHTML)
      })
    </script>
  </body>

四、设置/修改DOM元素属性

07-元素的属性赋值

  <body>
    <button>点我啊</button>
    <p style="color:red">我是p标签</p>
    <img src="" alt="" />
    <input type="text" value="aaa" />

    <script>
      // 获取元素
      let button = document.querySelector('button')
      let p = document.querySelector('p')
      let img = document.querySelector('img')
      let input = document.querySelector('input')

      button.addEventListener('click', function() {
        // 元素.属性的操作方式只适用于  内置属性
        // 内置属性:元素本身拥有的属性
        // p.idd = '我是p元素'
        // img.src = './images/1.jpg'

        input.value = '这是默认值'
      })
    </script>
  </body>

08-单击显示不同的图片

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

    <script>
      // 1.获取元素
      let button = document.querySelector('button')
      let img = document.querySelector('img')

      // 2.为按钮绑定单击事件
      button.addEventListener('click', function() {
        // 每次单击按钮,都要重新生成随机数,生成一个 1-4之间的随机数,包含1也包含4
        let index = parseInt(Math.random() * 4) + 1
        img.src = `./images/${index}.jpg`
      })
    </script>
  </body>

09-元素的样式操作-style

<body>
    <button>加啊</button>
    <p>我是p元素，我可以动态添加样式</p>
    <script>
      let button = document.querySelector('button')
      let p = document.querySelector('p')

      button.addEventListener('click', function() {
        // 元素的style是用于设置行内样式
        // 我们可以设置多个样式属性
        // style是所有样式集合,它是一个对象,所以我们是为style对象中的某个样式属性进行赋值
        // 语法: 元素.style.样式属性 = '样式值 '
        // console.log(p.style)
        p.style.color = 'red'
        // 如果样式属性值需要单位,那么在设置的时候也要带单位
        // p.style.fontSize = '40px'
        p.style['font-size'] = '40px'
        p.style.textDecoration = 'line-through'
      })
    </script>
  </body>

10-随机切换元素的背景

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

11-元素的样式类名操作

  <body>
    <button>改背景</button>
    <div class="mydiv">我是内容</div>

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

      btn.addEventListener('click', function() {
        // 为div元素设置类名样式
        // 语法：元素.className = '类名'
        div.className = 'mydiv divborder'
      })
    </script>
  </body>

12-classList操作类名样式

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

    <script>
      let add = document.querySelector('.add')
      let remove = document.querySelector('.remove')
      let toggle = document.querySelector('.toggle')
      let contains = document.querySelector('.contains')
      let p = document.querySelector('p')

      add.addEventListener('click', function() {
        // 语法：元素.classList.add('样式类名1','样式类名2'...)：在元素之前的类样式的基础上添加一个新的样式
        p.classList.add('size50', 'underline')
      })

      remove.addEventListener('click', function() {
        // 语法：元素.classList.remove('样式类名1','样式类名2'...)：在元素之前的类样式的基础上移除一个样式
        p.classList.remove('size50', 'underline')
      })

      toggle.addEventListener('click', function() {
        // 语法：元素.classList.toggle('样式类名')：如果元素已有这个样式则移除，否则添加
        p.classList.toggle('size50')
      })

      contains.addEventListener('click', function() {
        // 语法：元素.classList.contains('样式类名')：判断元素是否包含某个样式，如果包含则返回true
        let isHas = p.classList.contains('size50')
        console.log(isHas)
      })
    </script>
  </body>

13-表单元素属性操作

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

    <script>
      let pass = document.querySelector('.pass')
      let change = document.querySelector('.change')
      change.addEventListener('click', function() {
        if (pass.type == 'text') {
          pass.type = 'password'
        } else {
          pass.type = 'text'
        }
      })

      // 实现全选和全不选
      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
        })
      })
    </script>
  </body>

五、定时器

14-添加定时器

<script>
      // 每隔1s钟打印出一句话
      // setInterval(需要执行的函数，间隔时间)：可以每间隔指定的时间重复执行指定的函数
      // 特点：定时器的函数不会立刻执行，而是间隔时间之后再执行第一次，时间以豪秒做为单位
      setInterval(function() {
        console.log('还早')
      }, 5000)
    </script>

15-关闭定时器

<body>
    <button class="no">别说了</button>
    <button class="go">继续说</button>
    <span>5</span>

    <script>
      let go = document.querySelector('.go')
      let no = document.querySelector('.no')
      let span = document.querySelector('span')

      let count = 10
      // 接收定时器的标识--句柄
      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)
      })
    </script>
  </body>

16-倒计时

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

17-自动切换图片

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

Web APIs&DOM-获取DOM元素、修改属性

一、Web API 基本认知

1. 作用和分类

2. 什么是DOM

3. DOM树

4. DOM对象（重要）

二、获取DOM对象

01-获取元素-querySelector

02-获取元素-querySelectorAll

03 获取元素补充说明

04-其它获取元素的api

三、设置/修改DOM元素内容

05-元素内容的操作

06-随机点名并渲染在页面的某个位置

06-元素的内容的获取

四、设置/修改DOM元素属性

07-元素的属性赋值

08-单击显示不同的图片

09-元素的样式操作-style

10-随机切换元素的背景

11-元素的样式类名操作

12-classList操作类名样式

13-表单元素属性操作

五、定时器

14-添加定时器

15-关闭定时器

16-倒计时

17-自动切换图片