Web前端 JS WebAPI

1、操作DOM

1.1、什么DOM？

DOM（Document Object Model——文档对象模型）：DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM树是什么？

将 HTML 文档以树状结构直观的表现出来，称之为文档树或 DOM 树
DOM树直观的体现了标签与标签之间的关系

在这里插入图片描述

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

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

DOM的核心思想：**把网页内容当做对象来处理！**它提供的属性和方法都是用来访问和操作网页内容的

1.2、获取DOM对象

前提条件：要操作一个Dom节点，就必须要先获得这个Dom节点，通过JS选择页面中的HTML元素

打印对象：console.dir('对象名')

querySelector

选择匹配的第一个元素

返回值：CSS选择器匹配的第一个元素，一个 HTML Element对象。 如果没有匹配到，则返回null

具体语法：

<body>
    <div>这是第一个盒子</div>
    <div id="box">这是第二个盒子</div>

    <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

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

        const box = document.querySelector('#box')
        console.log(box);

        const li = document.querySelector('ul li')		// 只能获取第一个元素
        console.dir(li)		// Java 
    </script>
</body>

querySelectorAll

选择匹配的多个元素

返回值：CSS选择器匹配的NodeList 对象集合

具体语法：

<body>
    <ul class="course">
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

    <script>
        // 获取匹配的多个元素
        const lis = document.querySelectorAll('.course li')
        console.log(lis)
    </script>
</body>

注：通过querySelector系列获得的元素得到的是一个伪数组

有长度有索引号的数组
但是没有 pop() push() 等数组方法
要想得到里面的每一个对象，则需要遍历（for）的方式获得

getElement系列

getElement系列方法获取DOM元素

<body>
    <h1>我是h1标题</h1>
    <div id="box">我是div盒子</div>

    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>

    <input type="checkbox" name="hobbies"> code
    <input type="checkbox" name="hobbies"> girl

    <script>
        let box = document.getElementById('box')			// id
        let items = document.getElementsByClassName('item')		// 类
        let h1 = document.getElementsByTagName('h1')		// 标签名称
        let hobbies = document.getElementsByName('hobbies')		// 相同 name 属性

        console.log(h1)
        console.log(box)
        console.log(items)
        console.log(hobbies)
    </script>
</body>

操作元素内容

对象.innerText 属性
对象.innerHTML 属性

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象！

<body>
    <div class="box">我是一个div盒子</div>
    
    <script>
        // 获取元素
        const box = document.querySelector('.box')
        // 修改文本内容
        console.log(box.innerText)      // 获取文本内容
        box.innerText = '<em>我是div标签 我可以布局网页</em>'       // 不解析标签
        box.innerHTML = '<em>我是div标签 我可以布局网页</em>'       // 会解析标签
    </script>
</body>

两者区别：

相同点：

都可以修改标签文本内容

不同点：

innerText属性，只会显示纯文本，不解析标签
而innerHTML属性，既可以显示纯文本，也会解析标签，多标签建议使用模板字符

1.3、操作元素属性

元素常用属性

还可以通过 JS 设置/修改标签元素属性，常见的属性有： href、title、src 等

<body>
    <img src="./images/1.jpg" title="漂亮可爱的小姐姐图片">

    <button onclick="changeImg()">点我更换图片</button>

    <script>
        function changeImg() {
            let arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg']
            // 生成随机数
            let ran = Math.floor(Math.random() * arr.length)
            // 获取图像元素
            const img = document.querySelector('img')
            // console.log(img)
            img.src = './images/' + arr[ran]
            img.title = '漂亮可爱的小姐姐图片'
        }
    </script>
</body>

元素样式属性

通过 style 属性操作CSS

<body>
    <div class="box"></div>
    
    <script>
        // 获取元素
        const box = document.querySelector('.box')
        // console.log(box)
        // 修改样式属性  对象名.style.样式属性 = '值'
        box.style.width = '350px'
        box.style.height = '350px'
        box.style.backgroundColor = 'orange'
    </script>
</body>

注：

CSS属性名写法为驼峰命名法
赋值的时候，需要的时候不要忘记加CSS单位
通常用于修改样式较少时使用，而且添加的是行内样式（权重较高）

通过类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，代码比较长，可以通过借助于CSS类名的形式

<style>
    .circle {
        width: 300px;
        height: 300px;
        background-color: sandybrown;
        border-radius: 50%;
        cursor: pointer;
    }

    .box {
        color: white;
        text-align: center;
        line-height: 300px;
    }
</style>

<body>
    <div class="box">这是一个圆圈</div>

    <script>
        // 获取元素
        const div = document.querySelector('div')
        // 添加类名
        div.className = 'box circle'
    </script>
</body>

注：

由于class是关键字，所以使用className去代替
className是使用新值换旧值（覆盖），如果需要添加一个类，需要保留之前的类

通过 classList 操作类控制CSS

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

<style>
    .wrap {
        display: flex;
        justify-content: space-around;
        width: 200px;
        margin: 60px auto;
    }

    .item {
        list-style: none;
        width: 20px;
        height: 20px;
        background-color: gray;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: white;
    }

    .active {
        background-color: coral;
        cursor: pointer;
    }
</style>

<body>
    <ul class="wrap">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

    <script>
        // 获取元素
        const item = document.querySelector('.item')
        // 修改样式     追加一个类 add()
        item.classList.add('active')
        // 修改样式     移除一个类  remove()
        item.classList.remove('active')
        // 切换样式     切换一个类  toggle()    没有添加，有则移除
        item.classList.toggle('active')
    </script>
</body>

className与classList两者区别：

className 会覆盖之前类名，如果需要以前的类名，在编写的时候还要手动加上！
classList 是追加和删除，不影响之前类名，修改样式也比较方便

表单元素属性

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

<input type="text" name="g-name" id="g-name" value="笔记本电脑">

<script>
    // 获取元素
    const gName = document.querySelector('#g-name')
    // 获取值
    console.log(gName.value)        // 笔记本电脑
    // 设置文本框的值
    gName.value = '平板'
    // 修改文本框 type 属性
    gName.type = 'date'
</script>

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true 代表添加了该属性，如果是false代表移除了该属性

例如： disabled、checked、selected

在这里插入图片描述

<input type="checkbox" name="hobbies"> code
<input type="checkbox" name="hobbies"> girl
<input type="checkbox" name="hobbies"> swim

<script>
    // 获取元素
    const ipts = document.querySelectorAll('input')
    for (let i = 0; i < ipts.length; i++) {
        console.log(ipts[i].checked)        // 默认没有勾选，返回false
        // 让三个多选框全部选中
        ipts[i].checked = true
    }
    // 让第一个复选框为禁用状态
    ipts[0].disabled = true
</script>

自定义属性

标准属性：也就是标签天生自带的属性，比如class id title等，可以直接使用点语法操作，比如：disabled、checked、selected
自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

<ul>
    <li data-gid="1001" data-hot="热卖商品">1</li>
    <li data-gid="1002">2</li>
    <li data-gid="1003">3</li>
</ul>

<script>
    const li = document.querySelector('ul>li:first-child')
    console.log(li.dataset)
    console.log(li.dataset.gid)     	// 1001
    console.log(li.dataset['hot'])      // 热卖商品
</script>

1.4、定时器

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时

定时器-间歇函数

开启定时器

具体语法：setInterval(函数,间隔时间)

<script>
    function love() {
        document.write(`<p>我爱你到天长地久</p>`)
    }

    let id = setInterval(love, 2000)        
    console.log(id)     	// 1
</script>

作用：

每隔一段时间都会调用这个函数
间隔时间单位是毫秒

注：

定时器调用函数名字的时候不需要加括号
定时器返回的是一个id数字

关闭定时器

一般不会刚创建就停止，而是满足一定条件才停止

具体语法：clearInterval(变量名)

<script>
    function love() {
        document.write(`<p>我爱你到天长地久</p>`)
    }

    let id = setInterval(love, 2000)
    console.log(id)         // 1

    // 关闭定时器
    clearInterval(id)
</script>