JavaScript进阶

⭐️前言⭐️

在上一篇文章【JavaScript简识】中介绍了关于JavaScript的基础语法知识，但只有基础语法知识是不够的，还需要操作页面，让页面动起来，更加丰富，本文就主要介绍能够操作页面元素的DOM API。

博客主页： 【如风暖阳】
精品Java专栏【JavaSE】、【备战蓝桥】、【JavaEE初阶】、【MySQL】、【数据结构】
欢迎点赞 收藏 ⭐留言评论 私信必回哟

本文由 【如风暖阳】 原创，首发于 CSDN

博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

博客中涉及源码及博主日常练习代码均已上传码云(gitee)、GitHub

---

1.DOM树

一个页面的结构是一个树形结构，称为DOM树。

DOM树的树形结构形如：

• 文档：一个页面就是一个文档，使用document表示
• 元素：页面中所有的标签都称为元素，使用element表示
• 节点：网页中所有的内容都可以称为节点，使用node表示。

这些概念在JS代码中就对应一个一个的对象。

2.常用DOM API

2.1 获取元素

要想操作页面上的元素，就需要先拿到对应的JS对象,DOM中提供了一组API能够获取到网页的元素，最常用的就是以下两个API。
querySelector
querySelectorAll
两者都是document的属性，通过页面document的属性和方法，来操作页面的内容。

用法：

let obj=document.querySelector("CSS选择器");

代码示例：

当querySelector的参数匹配器，匹配到了多个元素的时候，此时返回的对象，就是匹配结果中的第一个元素。
像上图的情况，如果想要把所有的li都选中，就需要使用querySelectorAll,其返回的是一个数组，包含了所有被选中的元素。

2.2 事件

事件就是浏览器对于用户的操作行为进行的一个统称，例如鼠标在页面上某个位置点击，就会产生一个鼠标点击事件；再例如鼠标滚轮来滚动页面，就会产生一组滚动事件…

JS的主要工作就是在不同的事件中，进行不同的处理。

事件的三个要素：

1. 事件源：哪个HTML元素产生的事件
2. 事件类型：鼠标移动，鼠标点击，键盘事件，窗口大小改变事件等
3. 事件的处理程序：当事件产生之后，执行怎样的代码

下边我们就用代码来展示最为常见的点击事件：

2.3 操作元素内容

操作元素需要先获取到元素，然后再进行修改，对元素进行修改，无非涉及到内容、属性、样式三个方面。

我们首先来看如何操作元素内容；

对元素内容的操作，我们主要通过Element.innerHTML属性设置或获取HTML语法表示的元素的后代。

语法规则：

//读操作
var content=element.innerHTML;
//写操作
element.innerHTML=htmlString;

代码练习：实现计数器

	<div id="screen">0div>
    <button id="plus">+button>
    <script>
        let plusBtn=document.querySelector("#plus");
        plusBtn.onclick=function() {
            // 1.获取到screen里的值
            let screen=document.querySelector("#screen");
            let val=screen.innerHTML;
            // 获取到的值默认为string类型，需要转换成number类型
            val=parseInt(val);
            // 2.val++；
            val+=1;
            // 3.把新值写回去
            screen.innerHTML=val;
        }
    script>

预览效果：

实现以上代码效果还可以利用input标签来完成，input作为一个单标签，并没有innerHTML属性，但是可以通过的value属性来获取到内部的内容，代码如下：

	<input type="text" id="screen" value="0">
    <button id="plus">+button>
    <script>
        let plusBtn=document.querySelector("#plus");
        plusBtn.onclick=function() {
            // 1.获取到screen里的值
            let screen=document.querySelector("#screen");
            let val=screen.value;
            // 获取到的值默认为string类型，需要转换成number类型
            val=parseInt(val);
            // 2.val++；
            val+=1;
            // 3.把新值写回去
            screen.value=val;
        }
    script>

2.4 操作元素属性

可以通过Element对象的属性来直接进行修改，就能影响到页面显示效果。

代码示例：

	<img src="1.jpg" alt="头像1" title="帅哥">
    <script>
        let img=document.querySelector('img');
        console.dir(img);
        // console.log(img.src);
        // console.log(img.title);
        // console.log(img.alt);
    script>

通过console.dir这个方法，可以打印出一个dom对象的全部属性和值。
预览结果：

代码练习：点击切换图片

	<img src="1.jpg" alt="头像1" title="帅哥">
    <script>
        let img=document.querySelector('img');
        img.onclick=function() {
            console.dir(img);
            if(img.src.indexOf('1.jpg')>=0) {
                img.src='2.jpg';
            }else if(img.src.indexOf('2.jpg')>=0) {
                img.src='1.jpg';
            }
        }
    script>

预览效果：

我们还可以操作表单元素属性：

表单（主要是指input标签）有以下属性：

• value:input值
• disabled:禁用
• checked:复选框会使用
• selected:下拉框会使用
• type:input的类型（文本、密码、按钮、文件等）

代码练习：全选/取消全选按钮

1.点击全选按钮，则选中所有选项
2.只要某个选项取消，则自动取消全选按钮的勾选状态。

	<input type="checkbox" id="all">我全都要 <br>
    <input type="checkbox" class="girl">美杜莎 <br>
    <input type="checkbox" class="girl">云韵 <br>
    <input type="checkbox" class="girl">萧薰儿 <br>
    <input type="checkbox" class="girl">雅菲 <br>
    
    <script>
        // 1.获取到元素
        let all=document.querySelector('#all');
        let girls=document.querySelectorAll('.girl');
        // 2.给all注册点击事件，选中/取消所有选项
        all.onclick=function() {
            for(let i=0;i<girls.length;i++) {
                girls[i].checked=all.checked;
            }
        }
        // 3.给girl注册点击事件
        for(let i=0;i<girls.length;i++) {
            girls[i].onclick=function() {
                // 检测当前是不是所有的girl都被选中了
                all.checked=checkGirls(girls);
            }
        }
        // 4.实现checkGirls
        function checkGirls(girls) {
            for(let i=0;i<girls.length;i++) {
                if(!girls[i].checked) {
                    //只要有一个girl没被选中，就认为结果是false
                    return false;
                }
            }
            // 所有girl都被选中，就是全选中
            return true;
        }
    script>

效果预览：

2.5 操作元素样式

操作元素样式本质上也是操作元素属性。
可以通过行内样式或者类名样式来完成操作。

行内样式示例：点击放大字体

element.style.[属性名] = [属性值];

	<div style="font-size:20px">这是一个文本div>

    <script>
        let div=document.querySelector('div');
        div.onclick=function() {
            // 1.先获取到当前字体大小
            console.log(parseInt(div.style.fontSize));
            let fontSize=parseInt(div.style.fontSize);
            fontSize+=5;
            div.style.fontSize=fontSize+'px';
        }
    script>

效果预览：

类名样式示例：开启夜间模式

element.className = [CSS 类名];

class是JS的关键字，所以名字叫做className

点击关灯切换到夜间模式（背景变成黑色）
点击开灯恢复至日间模式（背景变成白色）

	<style>
        .light {
            background-color: #fff;
            color: black;
        }

        .dark {
            background-color: #000;
            color: #fff;
        }
    style>
    <div class="light" style="height:500px">这是一段话div>
    <button>关灯button>

    <script>
        let div=document.querySelector('div');
        let button=document.querySelector('button');
        button.onclick=function() {
            if(div.className=='light') {
                div.className='dark';
                button.innerHTML='关灯';
            }else if(div.className=='dark') {
                div.className='light';
                button.innerHTML='开灯';
            }
        }
    script>

效果预览：

2.6 操作节点

2.6.1 新增节点

1.创建新元素节点

此时该新节点并不能在页面中显示出来，需要在页面的父节点上插入该子结点才能将该新节点显示出来。

2.把元素节点插入到dom树中

2.6.2 删除节点

利用页面父节点的removeChild方法删除节点

3.综合案例

3.1 代码案例：猜数字

期待效果：

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>Documenttitle>
head>
<body>
    <button id="resetBtn">重新开始一局游戏button><br>
    <span>要猜的数字：span>
    <input type="text">
    <button id="guessBtn">猜button><br>
    <span>结果:span><span id="result">span><br>
    <span>已经猜的次数：span><span id="guessCount">0span>

    <script>
        // 1.先把上面需要用到的元素拿到
        let resetBtn=document.querySelector('#resetBtn');
        let input=document.querySelector('input');
        let guessBtn=document.querySelector('#guessBtn');
        let resultSpan=document.querySelector('#result');
        let guessCountSpan=document.querySelector('#guessCount');

        // 2.生成一个1-100的随机整数
        let toGuess=Math.floor(Math.random()*100)+1;
        // Math.random()生成[0,1)的数字，乘以一百通过floor向下取整，加一得到[1,100]的随机数
        console.log(toGuess);

        // 3.点击实现猜的逻辑
        guessBtn.onclick=function() {
            // 1.读取到input中输入的内容，并转成整数
            if(input.value=='') {
                return;
            }
            let curNum=parseInt(input.value);
            // 2.判定大小关系，并给出提示
            if(curNum<toGuess) {
                resultSpan.innerHTML='低了';
                resultSpan.style.color='red';
            }else if(curNum>toGuess) {
                resultSpan.innerHTML='高了';
                resultSpan.style.color='red';
            }else {
                resultSpan.innerHTML='猜对了！';
                resultSpan.style.color='green';
            }
            // 3.更新猜的次数
            let guessCount=parseInt(guessCountSpan.innerHTML);
            guessCountSpan.innerHTML=guessCount+1;
        }

        // 4.实现reset操作的逻辑（开始新游戏）
        resetBtn.onclick=function() {
            // 让页面刷新即可
            location.reload();
        }
    script>
body>
html>

效果预览：

3.2 代码案例：表白墙

期待效果：

代码示例：

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>Documenttitle>
head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: rgb(30,100,200);
        }

        .container {
            width: 100%;
        }

        h3 {
            text-align: center;
            padding: 30px 0;
            font-size: 24px;
            color: rgb(255,140,10);
        }
        p {
            text-align: center;
            color: rgba(66, 37, 3, 0.637);
            font-size: 18px;
            padding: 5px 0;
        }
        .row {
            width: 400px;
            height: 50px;
            margin: 0 auto;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;
            height: 40px;
            text-align: center;
            padding-right: 0px;
            font-size: 24px;
            color: rgb(255,140,10);
        }
        .row input {
            width: 300px;
            height: 40px;
            border: 2px solid  rgb(255, 140,160);
            border-radius: 5px;
            outline: 0;
            text-align: left;
            padding-left: 0px;
            margin-left: 0px;
            text-indent: 0.4em;
            font-size: 20px;

            color: rgb(100,160,255);
        }
        .row #submit{
            width: 200px;
            height: 40px;
            border-radius: 10px;
            font-size: 24px;
            border: 0px solid  rgb(255, 140, 160);
            background-color:  rgb(255, 140, 160);
            color:  aliceblue;
            line-height: 40px;
            margin-top: 8px;
        }
        .row #submit:active{
            background-color: rgb(140,180,240);
        }
    style>

    <div class="container">
        <h3>表白墙h3>
        <p>输入后点击提交,会将信息显示在表格中p>
        <div class="row">
            <span>谁：span>
            <input type="text">
        div>
        <div class="row">
            <span>对谁：span>
            <input type="text">
        div>
        <div class="row">
            <span>说：span>
            <input type="text">
        div>
        <div class="row">
            <button id="submit">提交button>
        div>
    div>

    <script>
        // 当用户点击submit,就会获取到input中的内容，从而把内容构造成一个div，插入到页面末尾
        let submitBtn=document.querySelector('#submit');
        submitBtn.onclick=function() {
            // 1.获取到3个input中的内容
            let inputs=document.querySelectorAll('input');
            let from=inputs[0].value;
            let to=inputs[1].value;
            let msg=inputs[2].value;
            if(from==''||to==''||msg=='') {
                // 用户还没有提交完，暂时先不提交数据
                return;
            }
            // 2.生成一个新的div，内容是input里面的内容，把这个新的div加到页面中
            let div=document.createElement('div');
            div.innerHTML=from+'对'+to+'说：'+msg;
            div.className='row';
            let container=document.querySelector('.container');
            container.appendChild(div);
            //3.清空之前输入框内的内容
            for(let i=0;i<inputs.length;i++) {
                inputs[i].value='';
            }
        }
    script>
body>
html>

效果预览：

---

⭐️最后的话⭐️
总结不易，希望uu们不要吝啬你们的哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正