一三四——一六七

超、凢脫俗 2023-09-30 19:29 7阅读 0赞

## 一三四、JavaScript——\_DOM简介 ##

MDNq前端参考文档：[DOM 概述 - Web API 接口参考 | MDN (mozilla.org)][DOM _ - Web API _ _ MDN _mozilla.org]

## 一三五、JavaScript——HelloWorld ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">点我一下</button>
    
        <script>
            /*
                要使用DOM来操作网页，我们需要浏览器至少先给我一个对象
                    才能去完成各种操作
                所以浏览器已经为我们提供了一个document对象，它是一个全局变量可以直接使用
                    document代表的是整个网页
                
            */
    
            // 打印document 和在控制台中访问document.window效果是一样的
            console.log(document)
    
            // 获取btn对象,获取id为"btn"的元素
           const btn = document.getElementById("btn")
    
           //console.log(btn)
    
           // 修改btn中的文字,通过innerText修改即可
           btn.innerText = "Click ME"
    
        </script>
        
    </body>
    </html>

// 打印document 和在控制台中访问document.window效果是一样的
            console.log(document)

![df5b1b15dffd4c84b1f7710bb2938e16.png][]

// 获取btn对象,获取id为"btn"的元素
           const btn = document.getElementById("btn")
    
           //console.log(btn)

![a3ba17f2757541c9b34a1d766d6ba5c2.png][]

// 修改btn中的文字,通过innerText修改即可
           btn.innerText = "Click ME"

![12ceb093a2534a4986164c0fc95d9ca5.png][]

## 一三六、JavaScript——文件节点 ##

**document**的整个原型链：

![66a2bc7ba0024dbcad16f73528cc669d.png][]

**MDN前端参考文档关于Document的部分：[https://developer.mozilla.org/zh-CN/docs/Web/API/Document][https_developer.mozilla.org_zh-CN_docs_Web_API_Document]**

![590ebe94c2eb4be09e2aa29c74dbb8dd.png][]

> **document对象**
> 
> \- document对象表示的是整个网页
> 
> \- document对象的原型链
> 
>  **本身 -> 父类 -> 父类的父类 -> 父类的父类的父类 -> 父类的父类的父类 ->父类的父类的父类的父类**
> 
> HTMLDocument \-> Document \-> Node \-> EnventTarget \-> Object.prototype \->null
> 
> \- **凡是在原型链上存在的对象的属性和方法都可以通过Document去调用**
> 
> \- 部分属性：
> 
> document.documentElement -- > html根元素
> 
> document.head -- > head元素
> 
> document.title -- > title元素
> 
> document.link -- > 获取页面中所有的超链接
> 
> ...

## 一三七、JavaScript——获取元素节点 ##

// 获取body标签以及body标签内的内容
            console.log(document.body)

![cc11a26cadc74646b4d17db5700f77f8.png][]

<button id="btn">点我一下</button>
        <script>
    
             // 通过id获取按钮
            const btn = document.getElementById("btn")
    
            console.log(btn)
        </script>

![e4e3161b76ed44e3a00bba5c03d4eff3.png][]

> **元素节点对象(element)**
> 
> \- 在网页中，每一个标签都是一个元素节点
> 
> \- 如何获取元素节点对象
> 
> 1. 通过document对象来获取元素节点
> 
> 2. 通过document创建元素节点
> 
> \- 通过document获取已有的元素节点对象
> 
> document.getElementById()
> 
> \- 根据id获取一个元素节点对象(只能获取一个，因为id是不能重复的)
> 
>  document.getElementsByClassName()
> 
> \- 根据元素的class属性获取一组元素节点对象
> 
>  document.getElementsByClassName()
> 
> \- 根据元素的class属性值获取一组元素节点对象
> 
> \- 返回的是一个类数组对象
> 
> \- 该方法返回的结果是一个实时更新的集合
> 
> 当网页中新添加元素时，集合也会实时的刷新
> 
> document.getElementsByTagName()
> 
> \- 根据标签名获取元素节点对象
> 
> \- 返回的结果是实时更新的集合
> 
> \- document.getElementsByTagName("\*")： 获取页面中的所有元素
> 
>  document.querySelectorAll()
> 
> \- 根据选择器去页面中查询元素
> 
> \- 会返回一个数组(不会实时更新)
> 
>  document.querySelector()
> 
> \- 根据选择器去页面中查询第一个符合条件的元素

<body>
    
        <button id="btn">点我一下</button>
    
        <span class="s1">我是pan</span>
        <span class="s1">我是span</span>
        <span class="s1">我是span</span>
        <span class="s1">我是span</span>
        <span class="s1">我是span</span>
    
    
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
    
        <form>
            <input type="text" name="username">
            <input type="radio" name="gender" value="男">
            <input type="radio" name="gender" value="女">
        </form>
    
        <script>
    
            /*
                元素节点对象(element)
                    - 在网页中，每一个标签都是一个元素节点
                    - 如何获取元素节点对象
                        1. 通过document对象来获取元素节点
                        2. 通过document创建元素节点
                    - 通过document获取已有的元素节点对象
                        document.getElementById()
                            - 根据id获取一个元素节点对象(只能获取一个，因为id是不能重复的)
                        document.getElementsByClassName()
                            - 根据元素的class属性获取一组元素节点对象
                        document.getElementsByClassName()
                            - 根据元素的class属性值获取一组元素节点对象
                            - 返回的是一个类数组对象
                            - 该方法返回的结果是一个实时更新的集合
                                当网页中新添加元素时，集合也会实时的刷新
                        document.getElementsByTagName()
                            - 根据标签名获取元素节点对象
                            - 返回的结果是实时更新的集合
                            - document.getElementsByTagName("*")： 获取页面中的所有元素
                        document.querySelectorAll()
                            - 根据选择器去页面中查询元素
                            - 会返回一个数组(不会实时更新)
                        document.querySelector()
                            - 根据选择器去页面中查询第一个符合条件的元素
                        
            */
    
            // 获取body标签以及body标签内的内容
            console.log(document.body)
    
            // 通过id获取按钮
            const btn = document.getElementById("btn")
    
            console.log(btn)
    
    
            // 通过Class的id的name获取span的内容
            const spans = document.getElementsByClassName("s1")
    
            // 遍历span标签的内容
            for(let i=0; i<spans.length; i++){
                //将内容都改为“哈哈哈”
                spans[i].innerText = "哈哈哈"+ i
            }
    
            console.log(spans)
    
    
            // 根据标签名div获取元素节点对象
            const divs = document.getElementsByTagName("div")
    
    
            // 获取页面中的所有元素
            const tagName = document.getElementsByTagName("*")
    
            console.log(tagName)
    
    
            // 针对form表单中的input
            const genderInput = document.getElementsByName("gender")
    
            console.log(genderInput)
    
            // 获取所有标签元素为div的
            const divs2 = document.querySelectorAll("div")
    
            // 打印的是一个集合 NodeList(5) [div, div, div, div, div]
            console.log(divs2)
    
            // 获取标签元素为div的，取单个的，一般情况就取第一个
            const divs3 = document.querySelector("div")
    
            // 在控制台直接打印div,点击显示的是第一个div标签
        </script>
        
    </body>

## 一三八、JavaScript——元素的属性和方法 ##

> 通过元素节点对象获取其他的节点的方法
> 
> element.childNodes 获取当前元素的子节点(会包含空白的节点)
> 
> 子节点包括：文本节点、标签节点等，
> 
> 标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的
> 
> element.children 获取当前元素的子元素
> 
> element.firstElementChild 获取当前元素第一个子元素
> 
> element.lastElementChild 获取当前元素第一个子元素
> 
> element.nextElementSibling 获取当前元素的下一个兄弟元素
> 
> element.previousElementSibling 获取当前元素的前一个兄弟元素
> 
>  element.parentNode 获取当前元素的父节点
> 
>  element.tagName 获取当前元素的标签名

<body>
    
        <div id="box1">
            我是box1
            <span class="s1">我是s1</span>
            <span class="s1">我是s1</span>
        </div>
        <span class="s1">我是s1</span>
        <script>
            /*
                div元素的原型链
                    HTMLDivElement -> HTMLElement -> Elemnet -> Node -> ---
                
                通过元素节点对象获取其他的节点的方法
                    element.childNodes 获取当前元素的子节点(会包含空白的节点)
                        子节点包括：文本节点、标签节点等，
                        标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的
                    element.children 获取当前元素的子元素
                    element.firstElementChild 获取当前元素第一个子元素
                    element.lastElementChild 获取当前元素第一个子元素
                    element.nextElementSibling 获取当前元素的下一个兄弟元素
                    element.previousElementSibling 获取当前元素的前一个兄弟元素
                    element.parentNode 获取当前元素的父节点
                    element.tagName 获取当前元素的标签名
            */
    
            // 获取id为box1的标签。通过documnet去调，则是通过整个网页范围内查找
            const box1 = document.getElementById("box1")
    
            //
            console.log(box1)
    
            // 通过box1去调，调用的范围只在box1的标签名内查找
            const spans = box1.getElementsByTagName("span")
    
            // 打印结果为2,name为box1的标签内的span标签数量为2
            console.log(spans)
    
           
            // 标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的。算一个
            const cns = box1.childNodes
            
            // 结果为5，说明节点数为5
            // 文本节点一个   标签节点两个  标签节点后的空白节点两个 共5个
            console.log(cns)
    
    
        </script>
        
    </body>

## 一三九、JavaScript——文本节点 ##

<body>
    
      
        <img src="" alt="">
    
    
        
        <div id="box1">
            <span>我是box1</span>
        </div>
        <script>
    
            /*
                在DOM中，网页中的所有文本内容都是文本对象
                    可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做
    
                    我们可以直接通过元素去修改其中的文本
                        修改文本的三个属性
                            element.textContent 获取或修改元素中的文本内容
                                - 获取的是标签中的内容，不会考虑css样式
                                - 不考虑样式就是本来的文本是大写，但通过textContent拿到的就是小写
    
                            element.innerText 获取或修改元素中的文本内容
                                - innerText获取内容时，会考虑css样式
                                - 考虑样式就是本来的文本是大写，但通过innerText拿到的就是大写，保留原有样式
    
                                - 当字符串中有标签时，会自动对标签进行转义，并不是真正的字符
                            element.innerHTML 获取或修改HTML中的代码
                                - 可以直接向元素中添加HTML代码
                                - innerHTML插入内容时，有被xss注入的风险
            */
    
            // 先通过id获取到标签的内容
            const box1 = document.getElementById("box1")
    
            // 通过element.textContent修改文本内容
          //  box1.textContent = "新的内容"
        </script>
        
    </body>

## 一四零、JavaScript——属性节点 ##

>  **属性节点(Attr)**
> 
> \- 在DOM中也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
> 
> **- 如何操作属性节点：**
> 
> 方式一：
> 
> 读取：元素.属性名(注意：class属性需要用className来读取)
> 
> 读取一个布尔值时，会返回true或false
> 
> 修改： 元素.属性名 = 属性值
> 
> 方式二：
> 
> 读取：元素.getAttribute(属性名)
> 
> 修改：元素.setAttribute(属性名，属性值)
> 
> 删除：元素.removeAttribute(属性名)

<body>
        <input type="text" name="username" value="admin">
        
    
        <script>
            /*
                属性节点(Attr)
                    - 在DOM中也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
                    - 如何操作属性节点：
                        方式一： 
                            读取：元素.属性名(注意：class属性需要用className来读取)
                                读取一个布尔值时，会返回true或false
                            修改： 元素.属性名 = 属性值
                            
                        方式二：
                            读取：元素.getAttribute(属性名) 
    
                            修改：元素.setAttribute(属性名，属性值)
    
                            删除：元素.removeAttribute(属性名)
    
    
    
            */
    
            // getElementsByName 因为获取的是Elements，要想获取一个需要加一个索引[0]
           const input = document.getElementsByName("username")[0]
    
           // 打印内容为：<input type="text" name="username" value="admin">
           console.log(input)
    
           
           const input1 = document.querySelector("[name=username]")
    
           console.log(input)
    
    
           // 修改：元素.setAttribute(属性名，属性值)
           input.setAttribute("value","孙悟空")
         
        </script>
    
        
    </body>

## 一四一、JavaScript——事件 ##

> **事件(event)**
> 
> \- 事件就是用户和页面之间发生的交互行为
> 
> 比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开键盘...
> 
> \- 可以通过为事件绑定响应函数(回调函数)，来完成用户之间的交互
> 
> \- 绑定响应函数的方式
> 
>  1. 可以直接在元素的属性中设置
> 
> 2. 可以通过为元素的指定属性设置回调函数的形式来绑定事件
> 
>  3. 可以通过元素addEventListener()方法来绑定事件

<body>
        
        
    
        <button id="btn">点我一下</button>
    
        <script>
            /*
                事件(event)
                    - 事件就是用户和页面之间发生的交互行为
                        比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开键盘...
                    - 可以通过为事件绑定响应函数(回调函数)，来完成用户之间的交互
                    - 绑定响应函数的方式
                        1. 可以直接在元素的属性中设置
                        2. 可以通过为元素的指定属性设置回调函数的形式来绑定事件
                        3. 可以通过元素addEventListener()方法来绑定事件
            */
    
            // 1.获取到按钮对象
            const btn = document.getElementById("btn")
    
            // 2.为按钮对象的事件属性设置响应函数,即点击了就会响应
            btn.onclick = function(){
                alert("点击按钮后调用的函数")
            }
    
            // 设置了新的绑定之后，新的绑定会将旧的绑定覆盖
            btn.onclick = function(){
                alert("设置新的绑定")
            }
    
            // 3. 通过元素addEventListener()方法来绑定事件
            btn.assEventListener("click", function(){
                alert("哈哈哈")
            })
    
            // 不会被覆盖，按顺序依次出现
            btn.assEventListener("click", function(){
                alert("嘻嘻嘻")
            })
        </script>
    </body>

## 一四二、JavaScript——文档的加载 ##

>  *  网页是自上而下加载的，如果将js代码编写到网页的上边（button按钮的上面
>  *  js代码在执行时候，网页还没有加载完毕，这时候会出现无法获取到DOM对象的情况
> 
> window.onload 事件会在窗口中的内容加载完毕之后才触发
> 
> \- 会等待所有文档都加载完成才会触发
> 
> document对象的DOMContentLoaded事件会在窗口中的内容加载完成之后才会触发
> 
> \- 当前文档加载完成就触发
> 
> **如何解决这个问题**：
> 
> 1. 将script标签写到body标签的最后的位置
> 
> 2. 将代码编写到window.onload的回调函数中，因为window.onload的回调函数是最后执行的，所以此时script可以放在任意位置，只要放在里面就可以最后执行
> 
> 3. 将代码编写到document对象的DOMContentLoaded的回调函数中(执行的时机早)
> 
> 4. 将代码编写到外部的js文件中，然后以defer的形式引入(执行的时机更早，早于DOMContentLoaded)
> 
> 开发过程中常用1，引外部文件时常用4

<body>
    
        <button id="btn">点我一下</button>
        <script>
    
            /*
                网页是自上而下加载的，如果将js代码编写到网页的上边（button按钮的上面）
                    js代码在执行时候，网页还没有加载完毕，这时候会出现无法获取到DOM对象的情况
    
    
                    window.onload 事件会在窗口中的内容加载完毕之后才触发
                        - 会等待所有文档都加载完成才会触发
                    document对象的DOMContentLoaded事件会在窗口中的内容加载完成之后才会触发
                        - 当前文档加载完成就触发
    
                    如何解决这个问题：
                        1. 将script标签写到body标签的最后的位置
                        2. 将代码编写到window.onload的回调函数中，因为window.onload的回调函数是最后执行的，所以此时script可以放在任意位置，只要放在里面就可以最后执行
                        3. 将代码编写到document对象的DOMContentLoaded的回调函数中(执行的时机早)
                        4. 将代码编写到外部的js文件中，然后以defer的形式引入(执行的时机更早，早于DOMContentLoaded)
    
                    开发过程中常用1，引外部文件时常用4
    
            */
    
    
            // 可以放在任意位置，因为window.onload的回调函数总在最后执行
            // window.onload() = function(){
            //     const btn = document.getElementById("btn")
            //     console.log(btn)
            // }
    
            // document对象的DOMContentLoaded的回调函数，只能通过 document.addEventListener调用
            document.addEventListener("load", function (){
    
                const btn = document.getElementById("btn")
                console.log(btn)
            })
    
            const btn = document.getElementById("btn")
            console.log(btn)
    
        </script>

## 一四六、JavaScript——元素的修改 ##

>  *  appendChild() 用于给节点添加一个子节点
>  *  insertAdjacentElement(添加的位置,要添加的元素) 可以向元素任意位置添加元素i
>  *  添加的位置：
>     
>     beforeend:标签的最后
>     
>     afterbegin:标签的开始
>     
>     beforebeing:与标签处于同级，在标签的前边插入元素(兄弟元素)
>     
>     afterend:与标签处于同级，在标签的后边插入元素(兄弟元素)
>  *  insertAdjacentHTML("插入的位置"， "插入的标签")
>  *  replaceWith("参与替换掉的元素")
>  *  remove() 方法来删除元素

<body>
    
        <button id="btn01">按钮01</button>
        <button id="btn02">按钮02</button>
    
        <hr>
        
        <ul id="list">
            <li id="swk">孙悟空</li>
            <li id="zbj">猪八戒</li>
            <li id="shs">沙和尚</li>
    
        </ul>
    
        <script>
    
            /*
                点击按钮后，向ul中添加一个唐僧
            */
    
            // 获取ul
            const list = document.getElementById("list")
          
    
            // 获取按钮
            const btn01 = document.getElementById("btn01")
            const btn02 = document.getElementById("btn02")
    
            btn01.onclick = function() {
    
                // 创建一个li
                const li = document.createElement("li")
                // 向li中添加文本
                li.textContent = "唐僧"
                // 给li添加id属性
                li.id = "ts"
    
                // // appendChild() 用于给节点添加一个子节点
                // list.appendChild(li)
                // console.log(list)
    
                // insertAdjacentElement(添加的位置,要添加的元素)可以向元素任意位置添加元素i
                // 两个参数：1.添加的位置 2.要添加的元素
                /*
                    添加的位置：
                        beforeend:标签的最后
                        afterbegin:标签的开始
                        beforebeing:与标签处于同级，在标签的前边插入元素(兄弟元素)
                        afterend:与标签处于同级，在标签的后边插入元素(兄弟元素)
                */
                list.insertAdjacentElement("afterbegin",li)
    
                // insertAdjacentHTML("插入的位置"， "插入的标签")
                list.insertAdjacentHTML("", "<li id='bgj'>白骨精</li>")
    
            }
    
            btn02.onclick = function() {
    
                // 创建一个蜘蛛精替换孙悟空
                const li = document.createElement("li")
                li.textContent = "蜘蛛精"
                li.id = "zzj"
    
                // 获取孙悟空
                const swk = document.getElementById("swk")
    
                // replaceWith() 使用一个元素替换当前元素
                // replaceWith("参与替换掉的元素")
                swk.replaceWith(li)
    
                // remove() 方法来删除元素
                swk.remove()
            }
        </script>
    </body>

## 一五零、JavaScript——节点的复制 ##

> 涉及的方法
> 
> **添加**：list.appendChild(l1)
> 
> 将l1添加到list中
> 
> **复制**：const newL1 = li.cloneNode(true)
> 
> 复制l1和l1下的子节点，l1标签里的文本节点就属于l1的子节点

<body>
    
        <button id="btn01">点我一下</button>
    
        <ul id="list1">
            <li id="l1">孙悟空</li>
            <li id="l2">猪八戒</li>
            <li id="l3">孙悟空</li>
    
        </ul>
    
        <ul id="list2">
            <li >蜘蛛精</li>
        </ul>
    
        <script>
    
            /*
    
                涉及的方法
                    添加：list.appendChild(l1)
                        将l1添加到list中
                    复制：const newL1 = li.cloneNode(true)
                        复制l1和l1下的子节点，l1标签里的文本节点就属于l1的子节点
            */
    
            /*
                点击按钮后，将id为l1的元素添加到list2中
    
            */
    
            // 先获取按钮
           const btn01 = document.getElementById("btn01")
           const list2 = document.getElementById("list2")
           const l1 = document.getElementById("l1")
           // 点击按钮触发的函数
           btn01.onclick = function() {
    
                /*
                    使用 cloneNode()方法对节点进行复制时，它会复制节点的所有特点包括各种属性
                        这个方法只会默认复制当前节点，即只复制标签节点，不会复制文本节点，
                        可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制
    
                */
               const newL1 = li.cloneNode(true)  // 用来对节点进行复制
    
    
               // 防止id完全重复，重新赋值一个id即可
               newL1.id = "newL1"
    
                // 利用appendChild,点击按钮后,将l1添加到list2中去
                list2.appendChild(l1)
           }
    
        </script>
        
    </body>

## 一五一、JavaScript——修改css样式 ##

>  *  在stylE标签中，
>     
>     在样式的结尾在结尾加 !important
>     
>     表示优先级最高，最先执行
>     
>     background-color: \#4ead56 !important;
>  *  修改样式的方式： 元素.style.样式名 = 样式值
>  *  如果样式名中含有"-"，例如"background-color"则需要将样式表修改为驼峰命名法"backgroundColor"
>  *  "background-color" -> "backgroundColor"

## 一五二、JavaScript——读取样式 ##

>  **getComputedStyle()**
> 
> \-它会返回一个对象，这个对象中包含了当前元素的所有生效的样式
> 
> \- 获取具体的样式数值：对象.width 获取样式的宽度
> 
> \- 伪元素获取样式信息：getComputedStyle(要获取的样式对象, "要获取的为元素")
> 
> **宽度以及高度的计算：**
> 
> \- 一般通过: "对象.width" 读取样式宽度时，都是带宽度的
> 
> \- 通过 parseInt(对象.width)将 200px 中的px消除
> 
> \- 再通过 + "px" 的方式加上单位
> 
> **返回值**
> 
> \- 返回的一个对象，对象中存储了当前元素的样式
> 
> **注意**
> 
> \- 样式对象中返回的样式值，不一定能拿来直接计算，有可能是auto
> 
> 所以使用时，一定要确保值偶是可以计算的才去计算

## 一五三、JavaScript——通过属性读取样式 ##

>  元素.clientHeight
> 
> 元素.clientWidth
> 
> \- 获取元素内部的宽度和高度(包括内容区和内边距，width和padding)
> 
> \- 返回的结果就是纯数字，不带单位
> 
>  元素.offsetHeight
> 
>  元素.offsetWidth
> 
> \- 获取元素的可见框的大小(包括内容区、内边距和边框)
> 
> \- 返回的结果就是纯数字，不带单位
> 
>  元素.scrollHeight
> 
>  元素.scrollWidth
> 
> \- 获取元素滚动区域的大小
> 
>  元素.offsetParent
> 
> \- 获取元素定位的父元素
> 
> \- 定位父元素，离当前元素最近的开启了定位的祖先元素
> 
> 如果所有的元素都没有开启定位则返回body
> 
>   
> 
> 
>  元素.offsetTop
> 
>  元素.offsetLeft
> 
> \- 获取元素相对于起定位父元素的偏移量

![54c3d75446b54417843b95b98383ab1b.png][]

## 一五四、JavaScript——操作class ##

>  *  元素.classList.add(class名称，class名称) ：向元素中添加一个或多个class
> 
> 元素.classList.remove(class名称) ：删除一个或多个class
> 
> 元素.classList.toggle(class名称) ：切换class
> 
> 元素.classList.replace(class1, class2) ：1去掉class1,替换成class2
> 
> box1.classList.contains("box1")： 判断是否含有某个class

<body>
    
        <button id="btn">点我一下</button>
    
        <hr />
    
        <div  class="box1"></div>
    
    
        <script>
    
            const btn = document.getElementById("btn")
    
            // querySelector取网页中第一次出现的标签
            const box1 = document.querySelector(".box1")
    
            btn.onclick = function() {
                /*
                    除了直接修改样式外，也可以通过修改class属性来简介修改样式
    
                    被替换的.className += " 具体替换的"  
                    注意具体替换的前有空格
                    box1.className += " box2"
                */
    
                // box1.className += " box2"
    
                /*
                    元素.classList.add(class名称，class名称) ：向元素中添加一个或多个class
                    元素.classList.remove(class名称) ：删除一个或多个class
                    元素.classList.toggle(class名称) ：切换class
                    元素.classList.replace(class1, class2) ：1去掉class1,替换成class2
                    box1.classList.contains("box1")： 判断是否含有某个class
    
                */
    
                // 元素.classList 是一个对象，对象中提供了对当前元素的类的各种操作方法
                box1.classList.add(box2)
    
                box1.classList.remove(box2)
    
                box1.classList.toggle("box2")
    
                // 把1去掉替换成2
                box1.classList.replace("box1","box2")
    
                // 检查是否包含
                box1.classList.contains("box1")
    
            }
    
        </script>
    </body>

![4569c7606c0b4c1ea227df619d5fe523.png][]

## 一五五、JavaScript——事件对象简介 ##

>  **event 事件**
> 
> \- 事件对象
> 
> \- 事件对象是由浏览器在事件触发时所创建的对象
> 
> 这个对象中封装了事件相关的各种信息
> 
> \- 通过事件对象可以获取到事件的详细信息
> 
> 比如：鼠标的坐标，键盘的按键
> 
> \- 浏览器在创建事件对象后，会将事件作为响应函数的参数传递
> 
> 所以我们可以在事件的回调函数中定义一个形参来接收事件对象

![7c82afd06c3447f78478ca488cf6723b.png][]

![50d29e47e44f44d2b6718b56e904dcc6.png][]

## 一五六、JavaScript——event对象 ##

**MDN前端参考文档**：[Event - Web APIs | MDN (mozilla.org)][Event - Web APIs _ MDN _mozilla.org]

> **在DOM中存在着多种不同类型的事件对象**
> 
> \- 多种事件对象有一个共同的祖先 Event
> 
> \- event.target 触发事件的对象
> 
> \- event,currentTarget 绑定事件的对象(问this)
> 
> \- event.stopPropaggation() 停止事件的向上传导
> 
> \- event.preventDefault() 取消默认行为
> 
> \- 事件的冒泡(bubble)
> 
> \- 事件的冒泡就是指事件的向上传导
> 
> \- 当元素的某个事件被触发后，其祖先元素上的相同元素也会被触发
> 
> \- 冒泡的存在大大简化了代码的编写，但在一些场景下我们并不希望冒泡存在

## 一五七、JavaScript——事件的冒泡 ##

## 一五八、JavaScript——事件的委派 ##

<body>
        <button id="btn">点我一下</button>
    
        <hr>
    
        <ul id="list">
            <li><a href="javascript:;">链接1</a></li>
            <li><a href="javascript:;">链接2</a></li>
            <li><a href="javascript:;">链接3</a></li>
            <li><a href="javascript:;">链接4</a></li>
        </ul>
     
        <script>
    
            // 获取所有为ul标签中的a标签
            const links = document.querySelectorAll("ul a")
            // 获取list标签
            const list = document.getElementById("list")
            const btn = document.getElementById("btn")
    
            for(let i=0; i<links.length; i++) {
                links[i].addEventListener("click", event => {
     
                    alert(event.target.textContent)
                })
            }
    
            // 点击按钮后，在ul中新增一个li
            btn.addEventListener("click", () => {
                // 通过insertAdjacentHTML("插入的位置", "插入的内容") 直接插入标签
                list.insertAdjacentHTML("beforeend", "<li><a href='javascript:;'>新超链接</a></li>")
            })
    
            /*
                上面虽然实现了点击按钮新增链接的功能，但还经历了遍历和点击添加的，
    
                我一个希望
                    只绑定一次事件，即可以让所有的超链接，包括当下和未来的超链接都具有这些事情
                
                思路：
                可以将事件统一绑定给document,这样点击超链接时由于事件的冒泡
                    会导致document上的点击事件被触发，这样只绑定依次，所有的超链接都会具有这些事件
    
                委派就是将本该绑定多个元素的的事件，统一绑定给一个共同事件
            */
    
            // 获取list中的所有链接
            const linkes = list.getElementsByTagName("a")
    
    
            // 将点击事件扩大到整个网页，即对象是document
            document.addEventListener("click", (event) => {
                // 在执行代码前，判断一下事件是由谁来触发
                // 检查event.target 是否在 links 中存在
                // 但link打印出来是 "HTMLCollection [a,a,a,a]" 我们需要的是数组
                // 调用静态方法 Arrary.form(linkes) 后，数组变为[a,a,a,a]
                // 或者直接用展开运算符展开[...linkes] 效果是一样的
    
                // 判断如果触发事件在linkes中出现了
                if([...links].includes(event.target)) {
                      // 点击事件触发后显示触发的文本 
                      alert(event.target.textContent)
                }
            }) 
    
        </script>
        
    </body>

## 一六零、JavaScript——事件的捕获 ##

> 事件的传播机制：
> 
> \- 在DOM中，事件的传播可以分为三个阶段：
> 
> 1.捕获阶段 (由祖先元素向目标元素进行事件的捕获)(默认情况下，事件不会在捕获阶段触发)
> 
> 2.目标阶段 (触发事件的对象)
> 
> 3.冒泡阶段 (由目标元素向祖先元素的进行事件的冒泡)
> 
> \- 事件的捕获，指事件从外向内的传导
> 
> 捕获是从外向里捕获
> 
> 冒泡是由里向外捕获
> 
> 当我们当前元素的触发事件以后，会先从当前元素的最大祖先元素开始事件的捕获
> 
> \- 如果希望在捕获阶段触发事件，可以将addEventListener的第三个参数设置为true
> 
> **一般情况下我们不希望事件在捕获阶段触发,所以通常不需要设置addEventListener第三个参数为true**
> 
>  eventPhase 表示事件触发的阶段，结果是数字
> 
>  **1 表示捕获阶段 2 表示目标阶段 3 表示冒泡阶段**

## 一六一、JavaScript——BOM简介 ##

> BOM
> 
> \- 浏览器对象模型
> 
> \- BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
> 
> \- BOM对象
> 
> \- Window —— 代表浏览器窗口(全局对象)
> 
>  \- Navigator —— 浏览器的对象(可以用来识别浏览器)
> 
>  \- Location —— 浏览器的地址栏信息
> 
>  \- History —— 浏览器的历史记录(控制浏览器前进后退)
> 
>  \- Screen —— 屏幕的信息
> 
> \- BOM对象是作为window对象的属性保存的，所以可以直接在JS中访问这些对象

## 一六二、JavaScript——Navigator ##

![4a64b15bb07a49c7b6c7765c6251a9f4.png][]

> **- BOM对象**  
> \- MDN前端参考文档：[https://developer.mozilla.org/en-US/docs/Web/API/Navigator][https_developer.mozilla.org_en-US_docs_Web_API_Navigator]  
> \- Navigator —— 浏览器的对象(可以用来识别浏览器)  
> userAgent 返回一个用来描述浏览器信息的字符串

<body>
        <script>
            /*
                    - BOM对象
                        - MDN前端参考文档：https://developer.mozilla.org/en-US/docs/Web/API/Navigator
                        - Navigator —— 浏览器的对象(可以用来识别浏览器)
                            userAgent 返回一个用来描述浏览器信息的字符串
                        
            */
           // console.log(navigator.userAgent)
    
    
           function getBrowserName(userAgent) {
      // The order matters here, and this may report false positives for unlisted browsers.
    
      if (userAgent.includes("Firefox")) {
        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
        return "Mozilla Firefox";
      } else if (userAgent.includes("SamsungBrowser")) {
        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
        return "Samsung Internet";
      } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
        return "Opera";
      } else if (userAgent.includes("Edge")) {
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
        return "Microsoft Edge (Legacy)";
      } else if (userAgent.includes("Edg")) {
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
        return "Microsoft Edge (Chromium)";
      } else if (userAgent.includes("Chrome")) {
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
        return "Google Chrome or Chromium";
      } else if (userAgent.includes("Safari")) {
        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
        return "Apple Safari";
      } else {
        return "unknown";
      }
    }
    
    const browserName = getBrowserName(navigator.userAgent);
    console.log(`You are using: ${browserName}`);
    
        </script>
    </body>

## 一六三、JavaScript——Location ##

> location表示的是网站的地址栏的信息
> 
> \- 可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
> 
> \- location.assign() 跳转到一个新的地址 （可以通过回退按钮回退到原来的地址）
> 
> \- location.replac() 跳转到一个新的地址 （无法通过回退按钮回退到原来的地址）
> 
> \- location.reload() 刷新页面,可以传递一个true来强制清缓存刷新
> 
> \- location.replac() 跳转到一个新的地址 （无法通过回退按钮回退到原来的地址）
> 
> \- location.href 获取当前地址

## 一六四、JavaScript——History ##

MDN前端文档：[https://developer.mozilla.org/en-US/docs/Web/API/History][https_developer.mozilla.org_en-US_docs_Web_API_History]

> history.back() 浏览器回退
> 
>  history.forward() 浏览器前进
> 
>  history.go() 可以向前跳转也可以向后跳转，取决于括号中输入的数字，正数向前，负数向后

<body>
        <button id="btn">点我一下</button>
    
        <script>
            const btn = document.getElement("btn")
            btn.onclick = () => {
                /*
                    history.back() 浏览器回退
    
                    istory.forward() 浏览器前进
    
                    history.go() 可以向前跳转也可以向后跳转，取决于括号中输入的数字，正数向前，负数向后
                */
    
                // 后退
                history.back()
    
                // 前进
                history.forward()
    
                // 
                history.go()
    
            }
        </script>
    </body>

## 一六五、JavaScript——定时器 ##

> 通过定时器，可以是代码再指定时间后执行
> 
> \- 设置定时器打方式有两种：
> 
>  setTimeout() (只执行一次)
> 
> \- 参数
> 
> 1. 回调函数(要执行的代码)
> 
> 2. 间隔的时间(毫秒)
> 
>  clearTimeout()
> 
> \- 关闭定时器
> 
>  setInterval() (每隔一段时间就会执行依次)
> 
> \- 参数：
> 
> 1. 回调函数(要执行的代码)
> 
> 2. 间隔的时间(毫秒)
> 
>  clearInterval()
> 
> \- 关闭定时器

<body>
        <h1 id="num"></h1>
    
        <script>
            /*
                通过定时器，可以是代码再指定时间后执行
                    - 设置定时器打方式有两种：
                        setTimeout() (只执行一次)
                            - 参数
                                1. 回调函数(要执行的代码)
                                2. 间隔的时间(毫秒)
                            clearTimeout()
                                - 关闭定时器
                        
                        setInterval() (每隔一段时间就会执行依次)、
                            - 参数：
                                1. 回调函数(要执行的代码)
                                2. 间隔的时间(毫秒)
                            clearInterval()
                                - 关闭定时器
            */
           
           const timer =  setTimeout(() => {
                alert("我是定时器中的代码")
            },1000)
    
            // 关闭定时器
            clearTimeout(timer)
    
    
    
            const numH1 = document.getElementById("num")
    
            let num = 0
           // 构建一个定时器，在指定时间不断生成数字并显示在H1标签中
            const timeres = setInterval(() => {
                num++
                numH1.textContent = num
    
                // 判断如果定时器的数字到200，则关闭定时器
                if(num === 200) {
                    clearInterval(timeres)
                }
            },500)
    
        </script> 
    </body>

## 一六六、JavaScript——调用栈 ##

> 时间循环(event loop)
> 
> \- 函数在每次执行时，都会产生一个执行环境
> 
> \- 执行环境负责存储函数执行的一切数据
> 
> \- 问题：函数的执行环境要存储到哪里
> 
> \- 函数执行环境存储到了一个叫做调用栈的地方
> 
>  \- 栈，是一种数据结构，特点：后进先出
> 
> 调用栈(call stack)
> 
> \- 调用栈负责存储函数的执行环境
> 
> \- 当一个函数被调用时，它的执行环境会作为一个栈帧
> 
>  插入到调用栈的栈项,函数执行完毕其他栈会自动从栈中弹出
> 
>  调用栈中放的都是正在执行的函数

![673898f9f5804c6b891c688f1c017eb4.png][]

![2c52adc1fbfa4ec7b8c212e39a53b624.png][]

## 一六七、JavaScript——消息队列 ##

>  **消息队列**
> 
> \- 队列，是一种数据结构， 特点：先进先出
> 
> \- 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的
> 
> 因为调用栈中又可能会存在一些还没有执行完的代码
> 
> \- 事件触发后，JS引擎是将事件响应函数插入到消息队列中排队

![5ed68e1f8bec49aa96c87cde09c4ea70.png][]

## 一六八、JavaScript——消息队列 ##

[DOM _ - Web API _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction
[df5b1b15dffd4c84b1f7710bb2938e16.png]: https://img-blog.csdnimg.cn/df5b1b15dffd4c84b1f7710bb2938e16.png
[a3ba17f2757541c9b34a1d766d6ba5c2.png]: https://img-blog.csdnimg.cn/a3ba17f2757541c9b34a1d766d6ba5c2.png
[12ceb093a2534a4986164c0fc95d9ca5.png]: https://img-blog.csdnimg.cn/12ceb093a2534a4986164c0fc95d9ca5.png
[66a2bc7ba0024dbcad16f73528cc669d.png]: https://img-blog.csdnimg.cn/66a2bc7ba0024dbcad16f73528cc669d.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[590ebe94c2eb4be09e2aa29c74dbb8dd.png]: https://img-blog.csdnimg.cn/590ebe94c2eb4be09e2aa29c74dbb8dd.png
[cc11a26cadc74646b4d17db5700f77f8.png]: https://img-blog.csdnimg.cn/cc11a26cadc74646b4d17db5700f77f8.png
[e4e3161b76ed44e3a00bba5c03d4eff3.png]: https://img-blog.csdnimg.cn/e4e3161b76ed44e3a00bba5c03d4eff3.png
[54c3d75446b54417843b95b98383ab1b.png]: https://img-blog.csdnimg.cn/54c3d75446b54417843b95b98383ab1b.png
[4569c7606c0b4c1ea227df619d5fe523.png]: https://img-blog.csdnimg.cn/4569c7606c0b4c1ea227df619d5fe523.png
[7c82afd06c3447f78478ca488cf6723b.png]: https://img-blog.csdnimg.cn/7c82afd06c3447f78478ca488cf6723b.png
[50d29e47e44f44d2b6718b56e904dcc6.png]: https://img-blog.csdnimg.cn/50d29e47e44f44d2b6718b56e904dcc6.png
[Event - Web APIs _ MDN _mozilla.org]: https://developer.mozilla.org/en-US/docs/Web/API/Event
[4a64b15bb07a49c7b6c7765c6251a9f4.png]: https://img-blog.csdnimg.cn/4a64b15bb07a49c7b6c7765c6251a9f4.png
[https_developer.mozilla.org_en-US_docs_Web_API_Navigator]: https://developer.mozilla.org/en-US/docs/Web/API/Navigator
[https_developer.mozilla.org_en-US_docs_Web_API_History]: https://developer.mozilla.org/en-US/docs/Web/API/History
[673898f9f5804c6b891c688f1c017eb4.png]: https://img-blog.csdnimg.cn/673898f9f5804c6b891c688f1c017eb4.png
[2c52adc1fbfa4ec7b8c212e39a53b624.png]: https://img-blog.csdnimg.cn/2c52adc1fbfa4ec7b8c212e39a53b624.png
[5ed68e1f8bec49aa96c87cde09c4ea70.png]: https://img-blog.csdnimg.cn/5ed68e1f8bec49aa96c87cde09c4ea70.png