JavaScript-3

Web API 基本认知

作用和分类

• 作用：就是使用 JS 去操作 html 和 浏览器
• 分类：DOM ( 文档对象模型 )、BOM ( 浏览器对象模型 )

DOM 是什么

• DOM ( Document Object Model —— 文档对象模型 )
• 它是用来呈现以及与任意 HTML 或 XML 文档交互的 API
• 通俗的说，DOM 是浏览器提供的一套专门用来"操作网页内容"的功能

DOM 树

• 什么是 DOM 树：将HTML文档以树状结构直观表现出来，我们称之为文档树或DOM树

• 作用：文档树直观的体现了标签与标签之间的关系

DOM 对象

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

• 浏览器根据 html 标签生成的 JS 对象
• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

document 对象

• 是 DOM 里面提供的一个对象
• 用来访问和操作网页内容
• 网页所有内容都在 document 里面

获取 DOM 对象

• 方式一：根据 CSS 选择器来获取 DOM 元素（重点）
• 方式二：其他获取 DOM 元素方法（了解）

方式一

具体内容

• 成功匹配的所有元素中，取第一个元素

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

返回值：CSS选择器匹配成功的所有元素中的第一个元素，是一个HTMLElement对象

• 成功匹配的所有元素中，取所有元素

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

返回值：CSS选择器匹配成功的所有元素，是一个装有HTMLElement对象的数组

演示部分

<body>
    <div>111</div>
    <div>222</div>
    <div class="box">aaa</div>
    <div class="box">bbb</div>
    <div class="box">ccc</div>
    <div id="d1">ddd</div>
    <ul>
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
    </ul>

    <script>
        const a = document.querySelector('.box')
        console.log(a);

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

        const li = document.querySelector('li')
        console.log(li);

        const lis = document.querySelectorAll('ul li')
        console.log(lis);
    </script>
</body>

方式二

    <script>
        // 根据id获取一个元素
        document.getElementById('nav')
        // 根据'标签名'获取一类元素
        document.getElementsByTagName('div')
        // 根据'类名'获取对应元素
        document.getElementsByClassName('box')
    </script>

操作元素内容

innerText

<body>
    <div>欢迎光临</div>
    <div class="box">我是Peter</div>
    <div class="top">搜索框</div>
    
    <script>
        // 1. 获取元素对象
        const box = document.querySelector('.box')

        // 2. 修改文字内容
        console.log(box.innerText);     // 输出内容:我是Peter
        box.innerText = '我是Jack'      // 注意：innerText 只显示纯文本，不解析标签
        // 例如：box.innerText = '<strong>我是Jack</strong>' 是解析不了标签的
    </script>
</body>

innerHTML

<body>
    <div>欢迎光临</div>
    <div class="box">我是Peter</div>
    <div class="top">搜索框</div>

    <script>
        // 1. 获取元素对象
        const box = document.querySelector('.box')

        // 2. 修改文字内容
        box.innerHTML = '<strong>我是Jack</strong>'
    </script>
</body>

操作元素属性

操作元素的常用属性

<body>
    <img src="./images/img2.png" alt="">

    <script>
        // 1. 获取图片对象
        const img = document.querySelector('img')

        // 2. 修改图片对象的属性值
        img.src = './images/img3.png'
    </script>
</body>

操作元素的样式属性

方式一

• 通过 style 属性操作 CSS

<body>
    <div class="box"></div>

    <script>
        // 1. 获取对象
        const box = document.querySelector('.box')

        // 2. 修改对象的样式的属性值
        box.style.width = '300px'
        box.style.backgroundColor = 'green'
    </script>
</body>

方式二

• 操作类名 ( className ) 操作 CSS

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: bisque;

        }

        .radius {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        // 1. 获取对象
        const box = document.querySelector('.box')

        // 2. 通过改'类名'的方式，去修改对象的样式
        box.className = 'active radius'
    </script>
</body>

方式三（重点）

• 通过 classList 操作类控制 CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: bisque;

        }

        .radius {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        // 1. 获取对象
        const box = document.querySelector('.box')

        // 追加一个类
        box.classList.add('active')
        // 删除一个类
        box.classList.remove('active')
        // 切换一个类
        // 判断这个类有没有，有就删掉，没有就加上，即：类似'取反'的效果
        box.classList.toggle('radius')
    </script>
</body>

操作表单元素属性

标准属性

• 标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法操作，比如：disabled、checked、selected

<body>
    <input type="text" value="电脑">

    <script>
        const ipt = document.querySelector('input')
        ipt.value = '书包'
    </script>
</body>

<body>
    <input type="checkbox" name="" id="" checked>

    <script>
        const ipt = document.querySelector('input')
        ipt.checked = false
    </script>
</body>

<body>
    <button disabled>点击</button>

    <script>
        const btn = document.querySelector('button')
        btn.disabled = false
    </script>
</body>

自定义属性（重点）

• 在 html 5 中推出来了专门的 data-自定义属性
• 在标签上一律以 data- 开头
• 在 DOM 对象上一律以 dataset 对象方式获取

<body>
    <div data-id="haha" data-spm="run">第1个</div>
    <div>第2个</div>
    <div>第3个</div>

    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id);    // haha
        console.log(one.dataset.spm);   // run
    </script>
</body>

定时器

间歇函数

使用场景

    网页中经常会需要有一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
    例如：网页中的倒计时
    定时器函数可以开启和关闭定时器

开启定时器

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

	作用：
		每隔一段时间调用这个函数（间隔时间单位：毫秒）

    <script>
        // 开启定时器的方式一：
        setInterval(function () {
            document.write('匹配成功 <br>')
        }, 1000)

        // 开启定时器的方式二：
        function add() {
            document.write('任务完成 <br>')
        }

        setInterval(add, 2000)	// 开启
    </script>

关闭定时器

	语法：
		let 变量名 = setInterval(函数, 间隔时间)
		clearInterval(变量名)

	作用：
		当满足某些条件时，关闭定时器

    <script>
        let n = setInterval(function () {
            document.write('匹配成功 <br>')
        }, 1000)

        console.log(n)  // 变量里面存的是独一无二的定时器序号，这个序号是为了避免多个定时器互相干涉
        
        // 关闭定时器
        clearInterval(n)
    </script>

具体案例

<body>
    <textarea name="" id="" cols="30" rows="10">
        《用户注册协议》
        您确认所有服务条款并完成注册程序时
        本协议在您与本网站间成立并发生法律效力
        同时您成为本网站正式用户
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议 (5s)</button>

    <script>
        const btn = document.querySelector('.btn')
        let second = 5   // 倒计时秒数
        let n = setInterval(function () {
            second--
            btn.innerHTML = `我已经阅读用户协议 (${second}s)`

            if (second === 0) {
                clearInterval(n)
                btn.innerHTML = `我同意该协议`
                btn.disabled = false
            }
        }, 1000)
    </script>
</body>

延时函数

基本认识

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：
	1.设置延时函数
	setTimeout(回调函数, 等待的毫秒数)
	
	2.清除延时函数
	let timer = setTimeout(回调函数, 等待的毫秒数)
	clearTimeout(timer)

具体演示

<body>
    
    <script>
        let timer = setTimeout(function () {
            alert("时间到了")
        }, 2000)
    </script>
</body>