Java Script - Web Api

aoe1231 / 2024-09-14 / 原文

变量声明有3个 ver、let 和 const。建议const优先，其次为let。

            const arr = ['red', 'pink']
            arr.push('blue')
            
            arr = [1, 2, 4]
            arr.push(5) // 错误，arr为const

1、Web Api 基本认知

1.1、作用和分类

作用：就是使用js去操作html和浏览器。

分类：DOM（文档对象模型）、BOM（浏览器对象模型）。

DOM的作用：开发网页内容特效和实现用户交互。

1.2、DOM树

DOM树是什么：

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

1.3、DOM对象

            const div = document.querySelector('div') // dom对象
            // 打印对象
            console.dir(div)

DOM对象：浏览器根据HTML标签生成的JS对象。

所有的标签属性都可以在这个对象上面找到；
修改这个对象的属性会自动映射到标签身上。

DOM核心思想：把网页内容当作对象来处理。

document对象：

是DOM里提供的一个对象；
所以它提供的属性和方法都是用来访问和操作网页内容的；
网页所有内容都在document里面。

2、获取DOM元素

2.1、根据CSS选择器来获取DOM元素

2.1.1、选择匹配的第一个元素

语法：document.querySelector('css选择器')

参数：包含一个或多个有效的CSS选择器字符串。

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。

    <body>
        <div class="box">123</div>
        <div class="box">abc</div>
        <p id="nav">导航栏</p>
        <ul>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
        </ul>

        <script>
            // 获取匹配的第一个元素
            const box = document.querySelector('div')
            // const box = document.querySelector('.box')
            console.log(box) // 123

            const nav = document.querySelector('#nav')
            console.log(nav)

            // 获取第一个小ul.li
            const li = document.querySelector('ul li:first-child')
            console.log(li)
        </script>
    </body>

2.1.2、选择匹配的多个元素

语法：document.querySelectorAll('css选择器')

参数：包含一个或多个有效的CSS选择器字符串。

返回值：CSS选择器匹配的多个元素，得到的是一个伪数组（有长度有索引号，但是没有pop()、push()等数组方法，想要得到里面的每一个对象，则需要遍历(for)的方式获得）。

    <body>
        <div class="box">123</div>
        <div class="box">abc</div>
        <p id="nav">导航栏</p>
        <ul>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
        </ul>

        <script>
            const lis = document.querySelectorAll('ul li')
            console.log(lis)
            for(let i = 0; i < lis.length; i++) {
                console.log(lis[i]) // 每一个li对象
            }

            const p = document.querySelectorAll('#nav')
            p[0].style.color = 'red'
        </script>
    </body>

2.1.3、其他获取DOM元素方法

        <script>
            // 根据id获取一个元素
            document.getElementById('nav')
            // 根据标签获取一类元素，获取页面所有div
            document.getElementsByTagName('div')
            // 根据类名获取元素，获取页面所有类名为w的
            document.getElementsByClassName('w')
        </script>

3、操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上都是操作DOM对象；
就是操作对象使用的点语法；
如果想要修改标签元素里面的内容，则可以使用如下几种方式。

3.1、元素.innerText 属性

将文本内容添加、更新到任意标签位置；
显示纯文本，不解析标签。

    <body>
        <div class="box">我是文字的内容</div>
        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改文字内容 对象.innerText 属性
            console.log(box.innerText) // 获取文字内容
            box.innerText = "我是一个盒子" // 修改文字内容
            box.innerText = "<strong>我是一个盒子</strong>" // 不会加粗
        </script>
    </body>

3.2、元素.innerHTML 属性

    <body>
        <div class="box">我是文字的内容</div>

        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改文字内容 对象.innerText 属性
            console.log(box.innerHTML) // 获取文字内容
            box.innerHTML = "<strong>我是一个盒子</strong>" // 会加粗
        </script>
    </body>

4、操作元素属性

4.1、操作元素常用属性

通过js设置、修改标签元素属性，比如通过src更换图片；

最常见的属性比如：href、title、src等。

语法：对象.属性=值

    <body>
        <img src="./images/1.webp" alt="" />
        <script>
            // 获取图片元素
            const img = document.querySelector('img');
            // 修改图片对象的属性
            img.src = '/images/2.webp'
        </script>
    </body>

4.2、操作元素样式属性

通过js设置、修改标签元素的样式属性，比如：

通过轮播图小圆点自动更换颜色样式；
点击按钮可以滚动图片，移动的图片的位置等等。

4.2.1、通过style属性操作css

语法：对象.style.样式属性=值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=dege" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
        <title>年会抽奖</title>

        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div class="box"></div>
        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改样式属性 对象.style.样式属性='值'
            box.style.width = '300px'
            // 多组单词的采取小驼峰命名法
            box.style.backgroundColor = 'hotpink'
            box.style.border = '2px solid blue'
            box.style.borderTop = '2px solid red'
        </script>
    </body>
</html>

注意：

修改样式通过style属性引出；
如果属性有 - 连接符，需要转换为小驼峰命名法；
赋值的时候，需要的时候不要忘记加css单位。

4.2.2、通过类名（className）修改样式

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：元素.className = 'active' // active是一个css类名

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

4.2.3、通过classList操作类控制css

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

2.2、

p86