JavaScript(WebAPI)

news2024/11/24 12:34:29

目录

1.什么是Web API?

2.DOM和DOM树

3.获取元素 

4.事件

5.操作元素

 获取/修改元素内容

1.innerText

2. innerHTML

获取/修改元素属性

获取/修改表单元素属性

获取/修改样式属性

1.修改内联样式

2.修改元素应用的CSS类名

6.操作节点

新增节点

删除节点

7.案例

1.网页版猜数字 

2.表白墙


1.什么是Web API?

 之前学习的JS分为三个大的部分

ECMAScript: 基础语法部分

DOM API: 操作页面结构

BOM API: 操作浏览器

(Web API就包含了了 DOM + BOM)

想要实现一个复杂的具有交互功能的页面不能只靠基础语法,还需要Web API 的支持

WebAPI是一个很具体的概念,特指DOM+BOM,本质就是相当于工具,一些函数/对象,能直接使用,提高开发的效率

2.DOM和DOM树

DOM ,文档对象模型.全称为 Document Object Model,提供了一系列的函数,让我们可以操作网页内容,网页结构,网页样式

一个页面的结构是一个树形结构, 称为 DOM 树.

注意:

文档: 一个页面就是一个 文档, 使用 document 表示

元素: 页面中所有的标签都称为 元素. 使用 element 表示

节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

3.获取元素 

之前几种方式获取元素的时候都比较麻烦,querySelector 能够完全复用前面学过的 CSS 选择 器知识, 达到更快捷更精准的方式获取到元素对象.

let element = document.querySelector(selectors);

注意:

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString . 该字符串必须是有效的 CSS选择器字符串;如果不是,则引发 ''SYNTAX_ERR'' 异常

指定选择器匹配的所有元素的列表,则应该使用 querySelectorAll()

可以在任何元素上调用,不仅仅是 document, 调用这个方法的元素将作为本次查找的根元素

看一个示例

querySelector()

<body>
    <div class="box">
        abc
    </div>
    <div id="id">
        def
    </div>
    <h3><span><input type="text"></span></h3>
    <script>
        // .box 是类选择器, #star 是 id 选择器
        let elem1 = document.querySelector('.box');
        console.log(elem1);
        let elem2 = document.querySelector('#id');
        console.log(elem2);
        let elem3 = document.querySelector('h3 span input');
        console.log(elem3);
    </script>
</body>

 querySelectorAll() 

4.事件

事件就是针对用户的操作进行的一些响应,要能够和用户交互,就需要知道用户做了什么操作,用户做出的一系列操作,就会在浏览器中产生一些事件(鼠标按下,双击,移动,键盘按下....),代码针对事件作出反应

事件三要素

事件源:明确那个元素产生的事件

事件类型:用户进行的什么操作,是鼠标按下,移动还是别的..

事件处理程序:事件发生之后,针对事件要执行的代码

看一个示例

事件源:btn按钮

事件类型:点击

事件处理程序:function()

其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

这个function是一个匿名函数,也是回调函数,不需要程序员来主动调用,而是由浏览器在合适的时机(触发点击操作)进行调用

5.操作元素

 获取/修改元素内容

1.innerText

<span>hello world</span>

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

         var div = document.querySelector('div');
        // 读取 div 内部内容
        console.log(div.innerText);
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</span>';

通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容. 修改页面的时候也会把 span 标签当成文本进行设置 

2. innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

先获取到该元素,使用innerHTML属性就鞥能拿到元素里的内容,修改该属性,就会影响到界面的显示

被打印的abc前面有一个数字11,是鼠标点击了11次,获得了11次该内容,chrome控制台默认会把相同的日志合并起来

如果不想合并,在设置中关闭取消勾选即可 

innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格 和换行.

获取/修改元素属性

html标签的属性也会映射到js对象中

通过 Element 对象的属性来直接修改, 就能影响到页面显示效果

我们实现一个功能,将背景图片点击后,换成另一张图片

 标签中的各种属性,都是可以获取和修改的

查看一个元素中的所有属性:console.dir(img);都可以获取到并且修改

获取/修改表单元素属性

表单元素有一些特别的属性,普通标签没有

value:获取input的值

 注意:console.log(input.innerHTML);不能获取到input的内容

 inner HTML得到的是标签的内容(开始标签和结束标签中间的内容),input标签是单个标签,就没有内容!!

看一个示例:我们给input里输入数字,然后点击后数字+1并显示出来

这个变成了字符串拼接,value属性是一个string类型的属性,直接加会变成字符串拼接

转换一下:

我们实现一下平时使用的密码框,可以切换密码是否显示的功能 

type也是input一个属性,影响的是输入框的形态,是可见的或者密码框

获取/修改样式属性

1.修改内联样式

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

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

"行内样式", 通过 style 直接在标签上指定的样式. 优先级很高. 适用于改的样式少的情况

示例:点击文字则放大字体

<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字体大小
            div.style.fontSize = fontSize + 'px';
        }
    </script>

注意:

初始字体大小为20px ,是个字符串属性,获取它之后要换成数字,parseInt(div.style.fontSize);

另外,这里的fontSize采用驼峰命名,CSS中采用的是脊柱命名:font-size,是因为CSS中不需要进行算术运算,所以不会被当成减号,并且CSS不区分大小写,使用驼峰也不合适,就使用脊柱法了

但是在别的语言中就需要转换,-会被当成减号!

2.修改元素应用的CSS类名

element.className = [CSS 类名];class 是 JS 的保留字, 所以名字叫做 className

 修改元素的 CSS 类名. 适用于要修改的样式很多的情况.

示例:点击页面切换到夜间模式(背景变成黑色) 再次点击恢复日间模式(背景变成白色)

<div id = 'one' class="light" style="font-size: 20px;height: 50px;">这是一个div</div></div>
    <style>
        .light{
            color:black;
            background:white;
        }
        .dark{
            color:aliceblue;
            background: #000;
        }
    </style>
    <script>
        let div = document.querySelector('#one');

        div.onclick = function(){
            //点击切换日间和夜间
            if(div.className == 'dark'){
                div.className = 'light';
            }else{
                div.className = 'dark';
            }
        }

6.操作节点

新增节点

分成两个步骤 1. 创建元素节点 2. 把元素节点插入到 dom 树中

document.createElement('input');是创建元素

div.appendChild(input);追加元素

再看个示例:实现无序列表的新增

    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        for(let n = 3;n<10;n++){
            let li = document.createElement('li');
            li.innerHTML = n+ '' + n;
            ul.appendChild(li);
        }

使用appendChild是把要追加的加到元素末尾

使用 insertBefore 将节点插入到指定节点之前.

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode 被插入节点(newNode)

parentNode 新插入节点的父节点

newNode 用于插入的节点

referenceNode newNode 将要插在这个节点之前,referenceNode 为 null 则 newNode 将被插入到子节点的末尾.referenceNode 引用节点不是可选参数.

看个示例:

<ul class="container">
        <li>11</li>
        <li>22</li>
    </ul>
    <script>
        let ul = document.querySelector('.container');
        let newul = document.createElement('div');
        newul.innerHTML = '这是一个新节点';
        ul.insertBefore(newul,ul.children[0]);

插入成功 

 

 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

 

第一次插入,是在最前面的0位置,现在相当于有三个元素了,0-这是一个新节点,1-11,2-22,又插入到2位置,那就是22这个位置前

 

注意:一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

 删除节点

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

child 为待删除节点

element 为 child 的父节点

返回值为该被删除节点

被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置. 如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常

我们删除刚才追加的节点 

 

我们对前面的内容做一个简单的总结

1.选中元素 query Selector/querySelectorAll

2.事件 onclick

3.修改元素内容 innerHTML

4.修改元素属性 元素.属性

5.修改表属性 元素.value 元素.type

6.元素样式 元素.style.样式名 = 值   元素.class Name = CSS类名

7.创建元素 createElement

8.将元素放到dom树上, appendChild

9.删除元素 removeChild


下面写两个案例

7.案例

1.网页版猜数字 

我们预期的效果:

 

<body>
        <div>请输入要猜的数字</div>
        <input type="text">
        <button>提交</button>
        <div class="result"></div>
        <script>
            //1.生成1-100随机数
            let toGuess = parseInt(Math.random()*100+1);
            console.log(toGuess);
            //2.进行猜数字操作
            let button = document.querySelector('button');
            let resultDiv = document.querySelector('.result');
            let input = document.querySelector('input');
            button.onclick = function(){
                //取输入框内容
                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>

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>表白墙</title>
    <style>
        /* *是通配符选择器,会选中页面所有的元素 */
        /* 消除浏览器的默认显示模式 */
         *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 600px;
            margin: 0 auto;
        }
        h1{
            margin-top: 100px;
            text-align: center;
        }
        p{
            text-align: center;
            color: #666;
            margin: 20px auto;
        }
        .row{
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;

        }
        .row span{
            width: 50px;
        }
        .row input{
            width: 200px;
            height: 30px;
        }
        .row button{
            width: 250px;
            height: 30px;
            color: aliceblue;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 3px;
        }
        /* 点击反馈 */
        .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>提交</button>
        </div>
    </div>
    <script>
        //实现提交操作,点击提交按钮,将用户输入的内容提交到页面上
        //点击的时候获取输入框内容,然后创建一个新的div.row,将内容构造进去
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            //1.获取输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from =='' || to == '' || msg == ''){
                return; 
            }
            //2.构造新的div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv)
            //3.清空之前的输入
            for(let input of inputs){
                input.value = '';
            }
        }
    </script>
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/403756.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3的composition API—setup函数, ref函数,reactive函数

1、Setup 函数 1.setup 是vue3中的一个配置项 2、setup是所有组件所需要的数据和方法都需要配置到setup中的 3、setup两种返回值&#xff1a; 若返回一个对象 若返回一个渲染函数 mian.js文件 注意&#xff1a;尽量不与Vue2混用 setup中无法访问vue2中的配置 不能是async函数…

Optional--Java8新特性最佳实践

Optional是在 Java8中引入的新特性之一。使用Optional类包装数据&#xff0c;可以避免经典的空检查和一些try-catch代码块。也能够通过链式方法调用&#xff0c;写出更流畅的函数式编程的代码。另一方面&#xff0c;滥用Optional也会导致性能低下和代码混乱。过往项目业务中有大…

【Linux】旋转锁 | 读写锁

在之前的线程学习中&#xff0c;用到的锁都是挂起等待锁&#xff0c;如果申请不到锁&#xff0c;那就会在锁中等待&#xff1b; 自旋锁则不大相似 文章目录1.自旋锁1.1 概念1.2 接口1.2.1 pthread_spin_init/destroy1.2.2 pthread_spin_lock1.2.3 pthread_spin_unlock2.读写锁…

VIO优化中不客观自由度 (gauge freedom) 的处理 (gauge handle)

文章目录1. 不可观的解释2. 几种不同的gauge handle处理方式2.1. free gauge方式2.2. fix gauge方式2.3. prior gauge方式2.4. g2o tutorial方式3.不同方式的协方差矩阵1. 不可观的解释 这篇论文 中对VIO的4-DOF不可观的定义如下&#xff0c;可以看到这种不可观就是如果对最后…

gerrit操作和jinkens编译合入代码

gerrit 先 查看自己的push 找到后添加reviewer 填写邮箱开头就可以出来 记得1 然后send 让人review 编译不过&#xff0c;gerrit上查看 1.是不是checkstyle问题 2.编译不过&#xff0c;去jinkens查看 先retrigger重新编译 如果发现多次编译失败 则要看下console output 查…

【ONE·Data || 顺序表】

总言 数据结构基础&#xff1a;顺序表模拟实现。    文章目录总言1、顺序表各接口功能实现描述1.1、如何创建一个顺序表&#xff1f;1.2、如何初始化顺序表&#xff1a;SLInit1.3、顺序表的尾插、头插1.3.1、顺序表尾插1.0&#xff1a;SLPushBack1.3.2、顺序表头插1.0&#x…

网络连接的三种模式

文章目录前言一、三种连接模式介绍二、三种网络连接模式的区别前言 在进行虚拟机配置时&#xff0c;网络连接分为三种模式&#xff1a;桥接模式&#xff0c;NAT模式&#xff0c;主机模式 一、三种连接模式介绍 张三、李四、王五在同一个网段&#xff0c;所以他们之间可以相互…

数据结构---双链表

专栏&#xff1a;数据结构 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;从零开始&#xff0c;数据结构&#xff01;&#xff01; 双链表前言双链表各接口的实现为要插入的值开辟一块空间BuyLN初始化LNInit和销毁LNDestory打印链表中的值LNPrint尾插LNPushBack和尾删LNPop…

vue2+elementUI完成添加学生删除学生案列

效果图&#xff1a; 点击添加学生按钮&#xff0c;弹出Dialog,收集用户信息&#xff1a; el-table中自定义复选框&#xff0c;选中一行&#xff0c;可以点击删除 代码区域&#xff1a;就一个HTML文件 <!DOCTYPE html> <html lang"en"> <head>&…

Flume基操

Flume概述 Flume 定义 Flume 是 Cloudera 提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输的系统。Flume 基于流式架构&#xff0c;灵活简单。 Flume最主要的作用就是&#xff0c;实时读取服务器本地磁盘的数据&#xff0c;将数据写入到…

带恒温冷藏功能的便携式自动采样器——可用于毒情监测

污水采样在验毒的工作流程中是怎样进行的呢&#xff1f; 污水采样&#xff1a;每个季度采样一次。例如在某市48家污水处理厂54个进水口采取水样&#xff0c;用便携式水质自动采样器连续采样7天&#xff0c;一天采样12次成为一个混合样。也就是说&#xff0c;一次采样的话&…

如何在 VS Code 中安装运行、编写C语言程序

1.下载 安装VS Code 去官网下载&#xff1a;https://code.visualstudio.com/Download 直接下载&#xff0c;安装即可。 2.安装VS code中2个插件 打开软件运行&#xff0c;在扩展商店中分别搜索安装 C/C 和 code runner 插件 3.下载mingb64 官网下载 https://sourceforge…

消息队列MQ用来做什么的,市场上主流的四大MQ如何选择?RabbitMQ带你HelloWorld!

文章目录MQ用来做什么的MQ会有什么样的麻烦MQ消息队列模式分类MQ消息队列常用协议市场主流四大MQRabbitMQ项目开发RabbitMQ中的组成部分MQ用来做什么的 省流 &#xff1a;系统解耦、异步调用、流量削峰 系统解耦 首先举例下面这个场景&#xff0c;现有ABCDE五个系统&#xff…

小黑子—Java从入门到入土过程:第二章

Java零基础入门2.0Java系列第二章1. 注释和关键字2. 字面量3. 变量3.1 基本用法3.2 使用方式3.3 注意事项4. 变量练习5. 计算机中的数据存储5.1 计算机的存储规则5.2 进制5.3 进制间转换二进制转十八进制转十十六进制转十十进制转其他进制6. 数据类型7. 定义变量的练习8. 标识符…

MATLAB——将直接型转化为并联型和级联型

题目1(IIR)&#xff1a; 已知一个系统的传递函数为&#xff1a; H&#xff08;z&#xff09;8−4z−111z−2−2z−31−1.25z−10.75z−2−0.125z−3H&#xff08;z&#xff09;\frac{8-4z^{-1}11z^{-2}-2z^{-3}}{1-1.25z^{-1}0.75z^{-2}-0.125z^{-3}}H&#xff08;z&#xff09…

Leedcode 1137. 第 N 个泰波那契数

泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n&#xff0c;请返回第 n 个泰波那契数 Tn 的值。 示例 1&#xff1a; 输入&#xff1a;n 4 输出&#xff1a;4 解释&#xff1a; T_3 0 1 1 2 T_4 1 …

2.线性表的顺序表示

数据结构很重要&#xff01; 数据结构很重要&#xff01;&#xff01;&#xff01; 数据结构很重要&#xff01;&#xff01;&#xff01;&#xff01; 思考 1.线性表的顺序表示内容有哪些&#xff1f;&#xff08;What&#xff09; 2.为什么要学线性表的顺序表示? ? (Why)…

POI 操作Excel的单元格样式超过64000的异常问题解决

文章目录POI 操作Excel的单元格样式超过64000的异常问题解决问题描述问题原因问题分析和解决简单的Excel文件生成Demo最终的解决方案POI 操作Excel的单元格样式超过64000的异常问题解决 问题描述 在用POI 生成Excel文件时&#xff0c;如果自定义的单元格的样式超过64000行&am…

SpringBoot+WebSocket实时监控异常

# 写在前面此异常非彼异常&#xff0c;标题所说的异常是业务上的异常。最近做了一个需求&#xff0c;消防的设备巡检&#xff0c;如果巡检发现异常&#xff0c;通过手机端提交&#xff0c;后台的实时监控页面实时获取到该设备的信息及位置&#xff0c;然后安排员工去处理。因为…

2.9.1 Packet Tracer - Basic Switch and End Device Configuration(作业)

Packet Tracer - 交换机和终端设备的基本 配置地址分配表目标使用命令行界面 (CLI)&#xff0c;在两台思科互联网络 操作系统 (IOS) 交换机上配置主机名和 IP 地址。使用思科 IOS 命令指定或限制对设备 配置的访问。使用 IOS 命令来保存当前的运行配置。配置两台主机设备的 IP …