WebAPI(DOM详解及实践)

摸鱼哥myg

已于 2023-07-23 20:08:45 修改

阅读量139

点赞数

分类专栏：前端文章标签：前端 javascript html es6 vscode

于 2023-07-20 13:01:41 首次发布

本文链接：https://blog.csdn.net/m0_71927557/article/details/131825546

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

a. querySelector 选中页面元素

b. innerHTML 获取/修改元素内容

c. 获取/修改元素属性

d. 获取/修改表单元素的属性

e. 获取/修改样式属性

f. createElement 新增元素

一、DOM 文档对象模型

1、基本概念

把HTML的每一个标签都可以映射到JS中的一个对应对象。

通过DOM就可以让JS代码来操作页面元素。

2、DOM树

3、DOM API

a. querySelector 选中页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">abc</div>
    <div class="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>

    <script>
        let elem1=document.querySelector('.box');  //使用CSS的类名选择器，选中box
        console.log(elem1);  //打印所对应的html代码
        console.dir(elem1);  //按照对象去打印
        //如果有多个.box，此时默认选中的是第一个
        //如果想全选，则使用querySelectorAll,返回的是一个数组，包含所有的.box

        let elem2=document.querySelector('#id');   //使用CSS的id选择器，选中id
        console.log(elem2);

        let elem3 = document.querySelector('h3>span>input');   //使用CSS的后代选择器，选中input
        console.log(elem3);
       
    </script>
</body>
</html>

b. innerHTML 获取/修改元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">abc</div>
    <div class="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>

    <script>
       let div = document.querySelector('.box');
       div.onclick = function(){
        console.log(div.innerHTML);//获取div里的内容,运行结果为abc
        
        div.innerHTML+='a';  //每点击一次abc，都会在abc的后面添加一个a,例如如果点击三次abc，得到的结果为abcaaa

       }
       
    </script>
</body>
</html>

c. 获取/修改元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\86188\Desktop\文件\头像\22222.jpg" alt="这是一个头像" title="头像1" width="100px">
    <!--原图片的属性-->

    <script>
        let img=document.querySelector('img');
        img.onclick = function(){
            //获取原图片的各种属性
            console.log(img.src);
            console.log(img.title);
            console.log(img.alt);
            console.log(img.width);
            img.src='C:\\Users\\86188\\Desktop\\文件\\头像\\11111.jpg';//修改图片，把地址设成你想要的图片
        }
    </script>
</body>
</html>

点击图片之后

d. 获取/修改表单元素的属性

表单元素（input,textarea,select）有一些普通标签没有的属性

最重要的就两个，value和type

value,字符串，获取表单里的内容

type

应用：每点击一次按钮，则文本框中的数加1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>点我一下</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            console.log(input.value);//获取表单里输入的内容，value是字符串

            //想实现点击按钮，则文本框中的数字+1的效果
            let value = parseInt(input.value);//将value转换成number类型
            value +=1;
            input.value = value;
        }

    </script>
</body>
</html>

应用： 隐藏密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>隐藏密码</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            if(input.type == 'text'){
                input.type = 'password';
                button.innerHTML = '显示密码';
            } else {
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }
        }
    </script>
</body>
</html>

e. 获取/修改样式属性

第一种，修改内联样式（修改style属性的值）

such as:

每点击一次文字，文字放大10个像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size:20px;">这是一个div,点击之后字体放大</div>

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

第二种，修改元素应用的CSS类名

suah as:

应用：切换夜间/日间模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="one" class="light" style="font-size:20px;height:500px;">这是一个div</div>

    <style>
        /*日间模式*/
        .light{
            color:black;
            background-color:white;
            
        }

        /*夜间模式*/
        .dark{
            color:white;
            background-color:black;

        }
    </style>

    <script>
        let div = document.querySelector('#one');
        div.onclick = function(){
            if(div.className == 'dark'){
                div.className = 'light';
            }else {
                div.className = 'dark';
            }

        }
    </script>
</body>
</html>

日间模式

夜间模式

f. createElement 新增元素

先创建一个元素，然后把这个元素放到dom树中

appendChild:把元素加到末尾

insertBefore：把元素加到指定子元素的前面（中间位置插入）

应用：想往div标签里放一个输入框input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="one">
        这是一个div
    </div>

    <script>
        let input = document.createElement('input');//先创建一个标签，参数填你的标签的类型，input,div等等
        input.values='hello';//给input加入属性

        //将input标签挂到dom树上
        let div = document.querySelector('.one');//先选中div标签
        div.appendChild(input);//appendChild追加一个子元素(加到末尾)，将input追加到div中
    </script>
</body>
</html>

g. removeChild 删除元素

先获取这个元素

父元素.removeChild(要删除的元素);

4、事件

事件的三要素：
事件源：哪个元素产生的事件。

事件类型：点击、双击、移动、键盘按下……

事件处理程序：事件发生以后，要执行哪个代码（要执行的代码都是提前设定好的）。

事件绑定的方法：

第一种方法（一般不这么使用）

点击abc时弹出内容为hello的弹窗

<div class="box" onclick="alert('hello')">abc</div>

第二种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">abc</div>
    <div class="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>

    <script>
       let div = document.querySelector('.box');
       div.onclick = function(){
        alert('hello');
       }
       
    </script>
</body>
</html>

div.onclick//鼠标点击事件
div.onmousemove//鼠标移动事件
div.onmouseenter//鼠标进入
div.onmouseleave//鼠标离开
//and so on……

5、DOM实践

a. 网页版本猜数字

要求：

生成一个1-100之间的随机数

让用户来输入一个数字

根据输入的数字的大小关系，给出提示，高了/低了/猜对了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <div>请输入要猜的数字</div>
    <input type="text">
    <button>提交</button>
    <!--使用这个div来显示结果-->
    <div class="result">

    </div>

    <script>
        //1、生成一个1-100的随机数
        let toGuess = parseInt(100*Math.random())+1;//Math.random生成的是[0,1)的小数
        console.log(toGuess);//可以在控制台看答案
        //2、进行猜数字操作
        let button = document.querySelector('button');
        let input = document.querySelector('input');
        let resultDiv = document.querySelector('.result');
        button.onclick = function(){
            //3、取出输入框中的内容
                if(input.value == ''){
                    //用户什么都没输入，直接返回
                    return;
                }
                let inputNum = parseInt(input.value);
                //比较大小关系
                if(inputNum < toGuess){
                    //低了
                    resultDiv.innerHTML = '低了';
                } else if(inputNum > toGuess){
                    //高了
                    resultDiv.innerHTML = '高了';
                }else{
                    //猜对了
                    resultDiv.innerHTML = '猜对了';
                }
        }
    </script>
</body>
</html>

b. 表白墙程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>

        /*通配符选择器，选中页面所有元素*/
        *{
            /*消除浏览器的默认样式*/
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        .container{
            width:600px;
            margin: 20px auto;
        }

        h1{
            text-align:center;/*让h1里的文字水平居中*/

        }
        
        p{
            text-align:center;
            color:#666;
            margin:20px 0;
        }

        .row{
            /*开启弹性布局*/
            display:flex;
            height:40px;
            /*水平方向居中*/
            justify-content:center;
            /*垂直方向居中*/
            align-items:center;
        }
        
        .row span{
            width:80px;
        }

        .row input{
            width:200px;
            height:30px;
        }

        .row button{
            width:280px;
            height:30px;
            color:white;
            background-color: orange;
            /*去掉边框*/
            border:none;
            border-radius:5px;/*圆角矩形*/
        }

        /*点击按钮的时候有个反馈*/
        .row button:active{
            background-color: grey;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <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 class="row">
            <button id ="revert">撤销</button>
        </div>


    </div>
    
    <script>
        //实现提交操作，点击提交按钮，能够把用户输入的内容提交到页面上显示
        //点击的时候，获取三个输入框中的文本内容
        //创建一个新的div.row，把内容构造到这个div中即可
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function(){
            //1、获取三个输入框的内容
            let person1 = inputs[0].value;
            let person2 = inputs[1].value;
            let message = inputs[2].value;
            if(person1=='' ||person2==''||message==''){
                return;
            }
            
            //2、构造新的div
            let rowDiv = document.createElement('div');
            rowDiv.className='row message';
            rowDiv.innerHTML = person1 + '对' + person2 + '说：' + message;
            containerDiv.appendChild(rowDiv);
            //3、清空之前的输入框内容
            for(let input of inputs){
                input.value='';
            }
        }
        let revertButton = document.querySelector('#revert');
        revertButton.onclick = function(){
            //删除最后一条消息
            //选中所有的row，找到最后一个row，然后进行删除
            let rows = document.querySelectorAll('.message');
            containerDiv.removeChild(rows[rows.length-1]);

        }
    </script>
</body>
</html>