JavaScript进阶：WebAPIs重点知识整理2

目录

1 对节点的相关操作

1.1 查找节点

1.1.1 查找节点的父节点

1.1.2 查找节点的子节点

1.1.3 查找节点的兄弟节点

1.2 新增节点（先创建，后追加）

1.3 克隆节点

1.4 删除节点

2 M 端（移动端）事件

3 JS清空表单的方法

4 swiper 插件的使用

5 延时函数

6 JS的执行机制

6.1 首先看一道面试题

7 location 对象

8 navigator 对象

9 history 对象

---

之前我们都是直接使用 document.querySelector('选择器'); 来直接获取元素节点的，下面将介绍通过节点与节点之间的关系，来对指定的节点进行操作。毕竟“打虎亲兄弟，上阵父子兵”.

1 对节点的相关操作

1.1 查找节点

1.1.1 查找节点的父节点

---

        const baby = document.querySelector('.baby')
        console.log(baby)
        console.log(baby.parentNode)  // 获取 dad
        console.log(baby.parentNode.parentNode)  // 获取 yeye
        console.log("--------------------")

1.1.2 查找节点的子节点

返回一个伪数组, 选择的是亲儿子，最近一级的

---

        const dad = document.querySelector('.dad')
        console.log(dad.children)  // 返回一个伪数组, 选择的是亲儿子，最近一级的
        console.log('-------------------')

1.1.3 查找节点的兄弟节点

---

        console.log(baby.previousElementSibling)  // 返回的是上一个节点
        console.log(baby.nextElementSibling)  // 返回的是下一个节点
        console.log("--------------------")

1.2 新增节点（先创建，后追加）

---

---

        //1. appendChild  插入到父元素的最后面
        const li = document.createElement('li')  // 创建节点li
        li.innerHTML = '我是新增的li'
        document.body.appendChild(li)  // 追加节点li

        //2. insertBefore  插入到指定的元素的前面
        const lipre = document.createElement('li')  // 创建节点li
        lipre.innerHTML = '我是新增的lipre'
        document.body.insertBefore(lipre, li)  // 追加节点lipre

---

1.3 克隆节点

---

        const ul = document.querySelector('ul')
        // 克隆
        const li1 = ul.children[0].cloneNode(true)  // 参数为true，表示深拷贝，拷贝的是里面的内容，如果为false,为浅拷贝，则只拷贝标签本身，不拷贝内容。
        // 追加
        ul.appendChild(li1)

---

1.4 删除节点

---

ul.removeChild(ul.children[1])  // 删除第2个子节点

2 M 端（移动端）事件

---

---

3 JS清空表单的方法

可以用于当用户提交表单后，自动清空表单内容  reset()

4 swiper 插件的使用

    
    
    
    
    

    


    

        
        

            

            
Slide 1
            
Slide 2
            
Slide 3
            
Slide 4
            
Slide 5
            
Slide 6
            
Slide 7
            
Slide 8
            
Slide 9
            
            

        
    
    
    
    

    
    

---

---

5 延时函数

6 JS的执行机制

6.1 首先看一道面试题

        // 面试题：
        // 代码1：
        console.log(111)
        setTimeout(function() {
            console.log(222)
        },1000)

        console.log(333)   // 111 333 222


        console.log("-------------------")


        // 代码2：
        console.log(111)
        setTimeout(function() {
            console.log(222)
        },0)

        console.log(333)  // 111 333 222

代码2中已经将延时器的时间定为0了，为什么输出的结果和代码1一样呢？？？

解答： 

1. js语言的一大特点是单线程的，也就是说同一时间只做一个任务

2. 任务又分为同步任务和异步任务

3. JS的执行机制是先执行同步任务，遇到异步任务，就将异步任务放入任务队列中，一旦执行栈中的同步任务执行完后，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

4. 其实对于在异步任务进入任务队列前，还是有一步操作的，那就是异步任务将被提交给对应的异步进程处理，也就是浏览器进行处理，在处理中，是多线程的，多个任务同时进行，先结束的就先进入任务队列进行排队，等待系统读取。

5.上述的过程就成为事件循环

7 location 对象

        // 1. location的href属性
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        const p = document.querySelector('p')

        btn.addEventListener('click', function(e) {
            window.location.href = 'https://www.baidu.com'
        })
        
        // // 声明倒计时变量
        let i = 5
        let timer =  setInterval(function() {
            i--
            if (i === 0) {
                clearInterval(timer)
                window.location.href = 'https://www.baidu.com'
            }
            p.innerHTML = `${i}秒后自动跳转`
        }, 1000)

        setTimeout(function() {
            window.location.href = 'https://www.baidu.com'
        }, 3000)
        // 3秒后跳转到百度




        // 2. location的search属性: 获取地址中携带的参数，符号 ? 后面的部分
        console.log(window.location.search)




        // 3. location的hash属性: 获取地址中携带的参数，符号 # 后面的部分
        console.log(window.location.hash)  // 为后期的vue路由铺垫，经常用于不刷新页面，显示不同的页面

        

        // 4. location的reload方法: 刷新页面
        // location.reload()  传入参数true表示强制刷新
        const reloadBtn = document.querySelector('.reload')

        reloadBtn.addEventListener("click", function() {
            location.reload()
            // location.reload(true)   表示强制刷新
        })

    

8 navigator 对象

        // navigator对象获取浏览器的相关信息
        // 常见的属性和方法
        // ->通过userAgent检测浏览器的版本及平台

        // 检测 userAgent (浏览器信息)
        (function () {
            const userAgent = navigator.userAgent

            // 验证是否为Android或者iPhone
            const isAndroid = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const isIPhone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            const isIpad = userAgent.match(/(iPad).*OS\s([\d_]+)/)

            if (isAndroid || isIPhone || isIpad) {
                window.location.href = "http://m.itcast.cn" // 跳转到移动端页面
            }
        })();
    

9 history 对象

    前进
    后退
    百度