WebAPI(DOM详解及实践)

已于 2023-07-23 20:08:45 修改
阅读量173 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript html es6 vscode
于 2023-07-20 13:01:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71927557/article/details/131825546
版权

目录

一、DOM  文档对象模型

1、基本概念

2、DOM树

3、DOM API 

a.    querySelector    选中页面元素

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

c.    获取/修改元素属性

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

​e.    获取/修改样式属性

f.    createElement    新增元素

g.    removeChild    删除元素

4、事件

5、DOM实践

a.  网页版本猜数字

 b.  表白墙程序

一、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>

Web之dom
中國颜值半壁江山的博客
09-27 586
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById('i1') /根据ID获取一个标签 document.getElementsByName('div
WebAPI详细知识
weixin_67649868的博客
12-14 1962
本文详细的介绍了webapi的内容，包括dom和bom，适合合于js入门的程序员
WEB-DOM
weixin_47775987的博客
03-10 773
DOM对象 1.body 提供对 <body> 元素的直接访问 2.cookie 设置或返回与当前文档有关的所有 cookie 3.lastModified 返回文档被最后修改的日期和时间 4.title 返回当前文档的标题 ...
【JavaEE初阶】前端篇：WebAPI
哎呀是小张啊 的博客
10-05 2406
这篇博客主要介绍的是 WebAPI 方面的知识，介绍了什么是 WebAPI，一些与元素相关的操作，一些操作节点的办法，并且还列举了两个案例：猜数字游戏、留言板 ~~~~~~~~~~~~~~~~~~~~
Web - DOM
weixin_34161032的博客
11-02 186
1. 简介 DOM（Document Object Mode）是一套web标准，地那一了访问HTML文档的一套属性、方法和事件 其本质： 　　网页 与 脚本语言 沟通的桥梁 　　脚本语言通过DOM对象来访问HTML页面，从而改变文档的结构、样式和内容。 　　当浏览器载入HTML文档时，他就会称谓document对象树。 2. DOM对象 （1）文档对象：整个HTML文档 （2...
JavaScript教程详解及案例实践
10-11
使用场景及目标：可用于Web开发者快速入门学习并巩固JS编码技巧、熟练掌握常见内置API及自定义功能方法。 其他说明：文档不仅有详尽的概念讲解还配合丰富的实战范例来帮助理解和记忆，使初学者能更快掌握该语言的...
DOM 详解
m0_48041877的博客
08-23 2231
DOM 详细介绍
带有定位当前位置的百度地图前端web api实例代码
09-02
【知识点详解】 ...通过学习和实践这段代码，开发者可以深入理解前端Web应用如何与地图服务集成，实现地图定位功能，这对于开发地图相关的移动应用、导航系统或者地理信息展示网站等项目非常有帮助。
JavaScript语言教程：基础语法、DOM操作、事件处理及新特性详解
最新发布
11-21
内容概要：本文档全面介绍了JavaScript作为一种轻量级的、解释...其他说明：此文档不仅涵盖了JavaScript的传统功能，还有现代前端技术和最佳实践指导，确保读者能够紧跟行业发展步伐，成为合格甚至优秀的Web开发人员。
js常用DOM方法详解
10-20
除了这些基础方法外，JavaScript的DOM API还包括更多高级操作，如insertBefore、appendChild、replaceChild、removeChild等，这些方法能够让开发者更灵活地操作DOM树结构。 通过熟练掌握并运用这些方法，开发者能够...
webapi案例
09-19
简单webapi案例分享，对于初识webapi或者想学写webapi的程序员可以下载看看 此api采用mvc模式
webapiDemo
01-09
本项目设计的知识点： 1、跨域。我们使用的是自定义的跨域。也可以使用微软提供的Cors 2、认证。我使用的是Auth2.0客户端模式。网上有很多关于Auth2.0的教程。如果你按照教程配置好了还没有起作用。你需要注意的是： （1）资源服务器和认证服务器的配置文件里面加上machineKey，其实machineKey主要为了负载均衡使用的。我们这里提一句machineKey能够被ASP.NET的识别，会影响项目中的加密解密。所以认证服务器生成token的时候会受到machineKey影响，所以资源服务器也要加上一样的machineKey。如果我们不加上machineKey，那么不同的服务器默认的machineKey就不一样了。 <system.web> <machineKey validationKey="2342341C2A31FEAA6EBC42D97265490A1309CF6434960699FD4EFD040E5B96B92E06F07024E5B1696CBD9635DAD047E3C0FE58F7B4662D87DADFA51" decryptionKey="34242342388388627D723CB53C9542863F0B286A6482709BA7E141" validation="SHA1" decryption="AES" /> </system.web> （2）资源服务器中加入了自定义的Startup.cs启动类，但是程序并没有走这个程序，其中一个原因是缺少Microsoft.Owin.Host.SystemWeb.dll 3、webapi传参类型和接收参数的方法。我们这里使用ModelBinder
web之DOM基础
weixin_44931166的博客
03-07 271
DOM DOM介绍 DOM是文档对象模型的简称。 借助DOM模型，我们可以使用js对HTML进行修改 DOM模型中有以下3种节点： 元素节点：各种标签就是这些元素节点的名称，例如< p>、< ul>等。 文本节点:文本节点总是被包含在元素节点的内部。 属性节点:一般用来修饰元素节点就称之为属性节点。 示例： //HTML文档 //a称之为元素节点,title="百度" ...
web前端DOM
weixin_43887184的博客
04-17 1282
1.2.1 什么是DOM ​ 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 ​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 1.2.2. ...
web.dom介绍及其应用.网址
尹烁的博客
05-28 315
http://www.w3school.com.cn/htmldom/dom_methods.asp
Web基础 ( 十 ) DOM
yuanchun的知识整理
05-30 966
这是一个文本域""这是一个文本域
浏览器 dom 解析的流程
qq_17335549的博客
01-08 545
在Web开发中，DOM解析后常常需要添加事件处理程序，以便对用户的交互作出响应。这涉及将事件与特定的DOM元素关联起来，并定义相应的处理函数。DOM（文档对象模型）解析是将HTML或XML文档转换为一个可以被程序访问和操作的树状结构的过程。根据语法分析的结果，构建一个树状结构，其中每个元素、属性和文本都对应于树中的一个节点。在对DOM进行操作之后，可能需要将更改反映回原始文档或渲染引擎，以确保用户界面的同步更新。首先，需要获取HTML或XML文档的原始数据，可以是从本地文件、网络请求或其他来源获取。
web前端学习笔记——DOM
Minnor的博客
05-26 745
关于DOM操作，我们主要针对于元素的操作，主要有 创建、增、删、改、查、属性操作、事件操作。
Web前端第三阶段--DOM
weixin_48310754的博客
07-11 703
固定元素的读取 html文件中有3个标签是固定的, 必然会有 操作元素的属性 标签读取元素 查找指定名称的标签 Tag标签 Name名 结果是 伪数组/类数组, 没有数组方法, 不能用forEach CSS选择器读取元素 classList classList: 把class属性封装后得到的对象 简单实例 点击按钮头像发生变化 大小图切换效果 轮播图 轮播图(滑动) 自定义属性 输入框事件 标签内容 innerHTML: 读取html代码, 写入时作为htm
浏览器WebAPI与DOM操作详解
Web应用程序接口（WebAPI）是浏览器提供的一系列接口，它包括了浏览器对象模型（BOM）和DOM。BOM允许JavaScript操作浏览器窗口、导航、历史记录等非文档相关的特性，而DOM则是用于处理和操作HTML或XML文档的结构化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摸鱼哥myg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值