Web APIs第一天：

一.webApi的基本认知：

• 作用：就是使用Js去操作html和浏览器
• 分类：
  • Dom：操作html和css
  • Bom: 操作浏览器
• Dom对象（重要）
  1. 浏览器根据html标签生成的Js对象
     • 所有的标签属性都可以在对象上面找到
     • 修改这个对象的属性会自动映射在标签身上
  2. 操作dom对象本质上就是在操作页面元素

二.获得Dom对象的方式：

1.document.querySelector

• 获取的是满足条件的第一个，一定只有一个
• 获取的Dom元素，可以直接操作
• 如果没有直接获取到，就返回null

2.document.querySelectorAll

• 获取的是满足条件的所有Dom对象，返回的是一个集合-NOdeList--伪数组
• 获取的是伪数组，无法直接操作，必须通过下标才能操作，所以我们对伪数组进行遍历
  • for
  • forEach
• 就算没有获取到元素也就返回一个伪数组--对象

    <script>
        document.querySelector('css选择器')
        // 例:获得一个divDom元素
        let divDom = document.querySelector('div')

        // 获得多个divDom元素
        let divDoms = document.querySelectorAll('div')
    </script>

三.设置/修改元素内容：

1. innerText: 只关注内容，不关注标签

2. innerHTML：可以解析标签

   使用：不明确数据的安全性的情况下，使用innerText

       <script>
           // 语法
           对象.属性 = 值
           // 获取元素
           let imgDom = document.querySelector('img')
           // 操作元素
           imgDom.src = `./img/01.jpg`
           imgDom.title = `这是一张美女图片`
       </script>
   

四.设置/修改元素属性：

1.设置/修改元素样式属性

• style操作css

  • 每个Dom对象都有一个style属性，style属性的值是一个对象，里面存储了所有行内样式对应的键值对
  • 如果样式名字带了-，比如bgc-color，到style对象中，变成驼峰命名法（js里面-会误认为减号）
  • style属性只能设置行内样式，在类样式中定义的样式通过style获取不到

• 操作类名（class/Name）

  • 由于class是关键值，所以使用calssName去代替
  • className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名classList

  添加：add（）

  删除：remove（）

  切换：toggle（）

  是否包含：contains（），包含返回true，不包含返回false

      <script>
          // 通过style属性操作css
          对象.style.样式属性 = 值
  
          // active 是一个css类名
          元素.className = 'active'
  
          // 追加一个类
          元素.classList.add('类名')
  
          // 删除一个类
          元素.classList.remove('类名')
  
          // 切换一个类
          元素.classList.toggle('类名')
  
      </script>
  

2.设置/修改表单属性

• 表单属性中添加就有效果，移除没有效果

• 如果为true代表添加了该属性，如果是false代表移除了该属性

• 常见表单属性：value disable checked selected

      <script>
          DOM对象.属性名 = 新值
          
          表单.value = '用户名'
  
          表单.type = 'password'
  
          表单.disable = 'false'
  
      </script>
  

五.定时器-间歇函数：

间隔一段时间重新执行的代码

• let timerId= setinterval（回调函数，间隔时间

• 清除定点器 clearinterval（timeId）

  注意点：

  • 定时器也是需要等待，所以后面的代码先执行
  • 每一次调用定时器，都会产生一个新的定时器

    <script>
        // 开启定时器
        setInterval(函数, 间隔时间)
        // 作用：每隔一段时间调用这个函数
        // 间隔时间单位是毫秒

        // 例：
        function repeat() {
            console.log('前端程序员头发多');
        }
        setInterval(repeat, 1000)

        //  关闭定时器
            clearInterval(变量名)
    </script>