JS复习-WebApi（3）

attribute

1. 作用：操作自定义属性（html中本来没有的属性（存储属性）

2. 操作自定义属性：

   （1）设置属性：元素.setAttribute（‘属性名’ ， 属性值）

   （2）获取属性：元素.getAttribute（‘属性名’ ， 属性值）

   *（获取会有结果）

   （3）移除属性：元素.removeAttribute（‘属性名’）

节点node

1. 含义：dom树中一切内容，皆为节点

   a. 元素节点 b. 属性节点 c.文本节点 d.注释节点

2. 作用：帮助渲染引擎可以更好的渲染DOM树

3. 元素节点：

   • querySelector() :查找元素。根据选择器查询（相当于用身份证查找）
   • 查找，通过dom树查找元素

4. 获取子元素：

   • 元素.children (一定是伪数组)

   • 获取兄弟元素

     （1）获取上一个元素：元素.previousElementSibling

     （2）获取下一个元素：元素.nextElementSibling

     • 获取父元素: 元素.parentNode

        //先获取元素
        console.log(document.querySelector('#li2'))
        //1.获取父元素
        console.log(li2.parentNode)
        //2.获取父元素的父元素
        console.log(li2.parentNode.parentNode)
        //3.获取父元素的父元素的父元素
        console.log(li2.parentNode.parentNode.parentNode)
        //4.获取父元素的父元素的父元素的父元素
        console.log(li2.parentNode.parentNode.parentNode.parentNode)
        // 5.获取元素的上一次元素
        console.log(li2.previousElementSibling)
        // 6.获取元素的下一次元素
        console.log(li2.nextElementSibling)
        // 7.获取子元素
        console.log(ul.children)
   

DOM树新增元素的三种方式

1. document.write(’’)：几乎不用

2. 元素.innerHTML：少用（如果一次性操作100个元素以上，存在性能问题

   （1）字符赋值会覆盖 元素.innerHTML = ‘html字符串’

   （2）字符串拼接不会覆盖 元素.innerHTML +=‘html字符串’

3. 删 ： 父元素.removeChild(子元素)

4. 增 ：document.createElement(): DOM推荐使用

   使用方法：

   (1)在内存中创建空标签 ： document.createElement(‘标签名’)

   (2)设置标签内容

   (3)添加到页面dom : 父元素.appendChild(子元素)

5. 新增到最后面与新增到指定位置

   3.1 新增到最后面： 父元素.appendChild(元素)

   3.2 新增到元素前面 : 父元素.insertBefore(要新增的元素,哪一个元素前面)

   案例：

    // 1.创建空标签
        let li = document.createElement('li')
        // 2.设置标签内容
        li.innerHTML = '我是新来的'
        li.style.backgroundColor = 'red'
        // 3.area
        // document.querySelector('ul').appendChild(li)
        let li2 = document.querySelector('#li2')
        // 新增到ul最前面
        document.querySelector('ul').insertBefore(li, ul.children[0])
    ​
   

非空判断 ：

0. 作用： 检测输入框文本是否为空，如果没有则弹窗提示，如果有则继续
1. 重点：如果文本为空，则可以通过return跳过
2. 如果发表空格不属于文本的话，需要加输入框.value.trim()可以去除空格的占位

内置对象

内置对象：js作者提前写好的对象，直接可以拿来使用

Math：数学对象

Data：日期对象

         //1.创建日期对象    
         let d = new Date()
         console.log(d)
 ​
     
          //2.转换日期格式
         console.log( d.toLocaleString() )//2022/1/18 下午3:02:53
         console.log( d.toLocaleDateString() )//2022/1/18
         console.log( d.toLocaleTimeString() )//下午3:03:29
      //3.获取 年月日时分秒
         console.log( d.getFullYear() )//2022
         //范围下标 0-11 对应 1-12月
         console.log( d.getMonth() )//0 下标  第1个月
         console.log( d.getDate() )//18
         //星期下标 0-6 对应 周日-周六
         console.log( d.getDay() )//2
         console.log( d.getHours() )//15
         console.log( d.getMinutes() )//5
         console.log( d.getSeconds() )//44
 ​
         //4.获取时间戳  ： 1970年1月1日0秒 伦敦时间 -> 现在时间总毫秒数
         //时间戳作用 ： 解决浏览器时区兼容性    UTC时区:全球时区   GMT时区：东8区
         console.log( Date.now() )//1642489697575
         console.log( +new Date() )//1642489741950
         console.log( new Date().getTime() )//1642489741950

定时器

作用

一段代码 间隔事件 重复执行

定时器语法 ：

setInterval : 永久定时器。 一旦开启，永久重复执行，只能手动清除

(1)开启： let timeID = setInterval( 回调函数 , 间隔时间 )

(2)清除： clearInterval( timeID )

setTimeout : 一次定时器。一旦开启，间隔时间只会执行一次，完成后自动清除。

(1)开启： let timeID = setTimeout( 回调函数 , 间隔时间 )

(2)清除： clearTimeout( timeID )

倒计时案例：

     let time = setInterval(function () {
       // 1.获取元素时、分、秒
       let h = +document.querySelector('#hour').innerText
       let m = +document.querySelector('#minute').innerText
       let s = +document.querySelector('#second').innerText
       // 每秒-1
       s--
       // 当秒小于0的时候，s就从59开始，小时也要-1
       if (s < 0) {
         s = 59
         m--
       }
       if (m < 0) {
         m = 59
         h--
       }
       // 判断要不要+0
       s = s < 10 ? '0' + s : s
       m = m < 10 ? '0' + m : m
       h = h < 10 ? '0' + h : h
       // 把值赋值回去显示出来
       document.querySelector('#hour').innerText = h
       document.querySelector('#minute').innerText = m
       document.querySelector('#second').innerText = s
       // 判断时分秒有没有都等于0，如果都满足0，就清除定时器
       if (s == 0 && m == 0 && h == 0) {
         clearInterval(time)
       }
 ​
     }, 1000)x