【web】JavaScript——Web APIs笔记小结 Web APIs+dom部分（Web APIs和DOM简介）

已于 2022-11-24 21:36:29 修改
阅读量633 收藏
点赞数
分类专栏： web 文章标签： 前端 javascript 1024程序员节
于 2022-10-16 23:43:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61096287/article/details/127279359
版权

  争取卷起来啊喂，之前真的好躺qwq   

来源：JavaScript基础语法

目录

I.Web APls

① Web APIs 和 JS 基础的关联性

​编辑② API 和 Web API

II.DOM

① 简介​编辑

② 获取元素

※※ 根据ID 获取

​编辑※※ 根据标签名获取

※※ 通过HTML5新增的方法获取(i9以上版本支持)

※※ 特殊元素获取

③ 事件基础

※※ 三要素

​编辑

※※ 执行过程

④ 操作元素

※※ 修改普通元素

​编辑

※※※※ 普通案例

※※ 修改表单属性

※※※※ 表单案例

※※ 修改样式属性

​编辑 ※※※※ 样式案例

※※※※ 循环精灵图

※※ 文本框案例

I.Web APls

① Web APIs 和 JS 基础的关联性

② API 和 Web API

地址戳这 → MDN

II.DOM

① 简介

② 获取元素

※※ 根据ID 获取

用 getElementByld() 方法可以获取 带有ID 的 元素对象 

※※ 根据标签名获取

用 getElementsByTagName() 方法可以返回 带有指定标签名 的 对象的集合 

※※ 通过HTML5新增的方法获取(i9以上版本支持)

※※ 特殊元素获取

③ 事件基础

※※ 三要素

btn.onclick = function() {
    alert('点秋香');
}

※※ 执行过程

④ 操作元素

※※ 修改普通元素

※※※※ 普通案例

  图可以自己随便找，这里就不放了 

<img src="w.jpg" alt="早上好！">
<div>早上好</div>
<script>
    var img = document.querySelector(' img ');
    var div = document.querySelector('div ');
    var time = new Date();
    var h = time.getHours();
    if (h < 12) {
        img.src = "z.jpg";
        img.alt = "早上";
        div.innerHTML = '早安 ';
    } else if (h < 18) {
        img.src = "x.jpg";
        img.alt = "下午";
        div.innerHTML = '下午好 ';
    } else {
        img.src = "w.jpg";
        img.alt = "晚";
        div.innerHTML = '晚好 ';
    }
</script>

※※ 修改表单属性

※※※※ 表单案例

 html和css复习戳这里 → html汇总 、css边框 、css定位

我的：

<!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>Document</title>
    <style>
        .box {
            position: relative;
            width: 600px;
            height: 50px;
            margin: 50px auto;
            border: 10px inset dodgerblue;
        }
        
        input {
            width: 470px;
            height: 45px;
            outline: 0;
        }
        
        input::-ms-reveal {
            display: none;
        }
        /* 从网上学的去掉小眼睛的方法 */
        
        img {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>

    <body>
        <div class="box">
            <img src="2.jpg">
            <input type="password">
        </div>
        <script>
            var img = document.querySelector('img');
            var pw = document.querySelector('input');
            var flag = 0;
            img.onclick = function() {
                if (flag == 0) {
                    img.src = "1.jpg";
                    pw.type = 'text';
                } else {
                    img.src = "2.jpg";
                    pw.type = 'password';
                }
                flag = !flag;
            }
        </script>
    </body>

</html>

 PS. 例图是用ps拼起来的

pink的：

<!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>Document</title>
    <style>
        .box {
            width: 400px;
            border-bottom: 1px solid#ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd"></div>
    <script>
        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2.注册事件处理程序
        var flag = 0;
        eye.onclick = function() { //点击一次之后，flag一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>

</body>

</html>

※※ 修改样式属性

 ※※※※ 样式案例

我的： 

<!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>Document</title>
    <style>
        .box {
            position: relative;
            width: 445px;
            height: 440px;
            margin: 50px auto;
            border: 10px inset dodgerblue;
        }
        
        .btn {
            position: absolute;
            top: 13%;
            left: 20px;
            width: 30px;
            height: 30px;
            border: 3px solid slateblue;
            border-radius: 10px;
            text-align: center;
        }
        
        .img {
            position: absolute;
            top: 50%;
            margin-top: -190px;
            padding: 5px;
            right: 20px;
            width: 350px;
            height: 377px;
            border: 3px solid slateblue;
            border-radius: 10px;
        }
        
        p {
            margin: 3px;
            text-align: center;
            font-size: 15px;
        }
        
        img {
            width: 350px;
            height: 350px;
            border-radius: 20px;
        }
    </style>

    <body>
        <div class="box">
            <button class="btn">X</button>
            <div class="img">
                <p>图来自百度~！</p>
                <img src="1.jpg">
            </div>
        </div>
        <script>
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');

            btn.onclick = function() {
                box.style.display = 'none';
            }
        </script>
    </body>

</html>

PS.点了按钮好几次都没反应。。然后发现是把  document.querySelector('.btn'); 写成了  getElementsByClassName ，如果你也忘了的话赶快去看本篇的获取元素哦！

pink的：

<!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>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid#ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid#ccC;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        //1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2.注册事件程序处理
        btn.onclick = function() {
            box.style.display = 'none;'
        }
    </script>

</body>

</html>

※※※※ 循环精灵图

 这个是直接抄的pink的 

<!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>Document</title>

</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //1.获取元素所有的小li
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            //让索引号乘以44就是每个li的背景y坐标
            var index = i * 44;
            //index就是我们的y坐标
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

</body>

</html>

※※ 文本框案例

我的： 

<!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>Document</title>
    <style>
        .box {
            position: relative;
            margin: 50px auto;
            width: 270px;
            border: 10px groove dodgerblue;
            padding: 10px;
            border-radius: 10px;
        }
        
        input {
            color: #999;
            width: 260px;
            font-size: 16px;
            font-family: '楷体';
            font-weight: 700;
            height: 24px;
            border: 3px solid #999;
            border-radius: 6px;
        }
        
        button {
            position: absolute;
            height: 32px;
            width: 50px;
            margin-right: -4px;
            top: 20%;
            right: 5%;
            border: 3px solid #999;
            background-color: lightskyblue;
            border-radius: 6px;
            color: rgb(123, 122, 122);
            font-size: 16px;
            font-weight: 700;
            font-family: '楷体';
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" value="手机">
        <button>搜索</button>

    </div>
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (text.value == '手机') text.value = '';
        }
        text.onblur = function() {
            if (text.value == '') text.value = '手机';
        }
    </script>

</html>

 只放了显示的图，可以直接复制代码试一下ww

pink的： 

<!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>Document</title>

</head>

<body>
    <input type="text" value="手机">
    <script>
        //1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件获得焦点事件 onfocus
        text.onfocus = function() {
                //console.log('得到了焦点');
                if (this.value === '手机') this.value = '';
                //获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            //3.注册事件失去焦点事件 onblur
        text.onblur = function() {
            //console.log('失去了焦点'）；
            if (this.value == '') this.value = '手机';
            //失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

</body>

</html>

  恭喜看到这的小伙伴，你已经完成JavaScript APIs第一天的学习了~！！

下面进入第一天剩余部分的学习吧 (｡･∀･)ﾉﾞ → 样式属性部分案例

 有用的话可以点赞评论收藏哦！！

进击的文文文
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web APIs 笔记(DOM BOM)
qq_47132211的博客
02-18 2356
一、Web APIs 1. Web APIs 和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs 阶段 JS 基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果 2. API 和 Web API 总结 API 是为程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现 Web API 主要是针对于浏览器提供的借口，主要针对于浏览器做交互效果。 Web
【web】JavaScript——Web APIs笔记小结 dom 样式属性（dom+事件）
weixin_61096287的博客
03-31 1123
在学了在学了qwq 每天都被周围的卷王带着卷orz 又又又鸽了一个多月没学习呜呜orz 期末考成绩出了决定这学期痛改前非qwq 还有一周就蓝桥杯了qwq得赶紧收心学习了啊啊啊！ 来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts目录⑥ 三种动态创建元素区别※※ document.write()※※ element.innerHTML和document.createElement()I.DOM 重点核心II.事件① 注册事件(绑定事件)※
【web】JavaScript——Web APIs笔记小结 dom 样式属性（排他思想+自定义属性）
weixin_61096287的博客
10-24 434
JavaScript——Web APIs dom样式属性部分的一些案例
【web】JavaScript——Web APIs笔记小结 dom 样式属性（自定义属性+节点操作部分）
weixin_61096287的博客
11-22 974
自定义属性+节点操作部分
【web APIs】快速上手Day01（Dom获取&属性操作）
学习是最低成本的投资
06-10 2019
DOM树、DOM节点、DOM对象、获取DOM对象、操作元素内容、操作元素属性、通过 style 属性操作CSS、操作类名(className) 操作CSS、通过 classList 操作类控制CSS、操作表单元素属性、自定义属性、定时器的开启与关闭、阅读注册协议、轮播图案例
前端学习笔记 | WebAPIs（DOM+BOM）
m0_53522458的博客
03-13 1093
DOM操作、事件监听、事件流、事件委托、元素尺寸与位置、日期对象、节点操作、M端事件、window对象、本地存储、数组map和join方法、正则表达式
黑马JavaScript笔记（二）web-APIs DOM、事件高级
jiujiujm的博客
06-06 870
DOM 01DOM简介 02获取元素 03事件基础 04操作元素 05节点操作
前端学习——Web APIs (DOM+BOM)
weixin_57896572的博客
11-09 1235
Pink老师，Web APIs学习笔记，包含BOM和DOM的基础知识。
JavaScript基础——Web APIS之DOM学习笔记
爱前端的程序媛的博客
03-06 324
今天大概过了一下DOM的基本操作，如何获取元素、事件基础、如何操作元素对象。看着视频学习的，知识量有的大，练习今天下午还没有整完，就练习了一部分的知识点。就大概记录一下今天的学习笔记吧。 DOM的概念 API的中文意思：应用程序编程接口 Web APIS ：DOM（文档）和是BOM（浏览器） DOM：文档模型对象，是一个供开发者直接使用的接口，不需要定义的。我们可以通过DOM对网页的内...
JSWeb APIS笔记 笔记笔记
10-19
**JSWeb APIS笔记概述** JSWeb APIS是JavaScript在Web开发中用于与浏览器交互的一系列接口和对象，它们使得JavaScript能够操作HTML文档、处理用户交互、管理窗口和历史、以及存储和获取本地数据。本笔记将深入探讨...
Web APIs笔记03——DOM-节点操作
visionchyw的博客
07-01 157
Web APIs笔记03——DOM-节点操作
Web APIs笔记01——DOM-获取DOM元素、修改属性
visionchyw的博客
06-28 260
Web APIs笔记01——DOM-获取DOM元素、修改属性
Web APIs笔记06——BOM- 操作浏览器
visionchyw的博客
07-25 195
Web APIs笔记06——BOM- 操作浏览器
TinyWebSever源码逐行注释(五)_ http_conn.cpp
最新发布
qq_39969848的博客
09-09 638
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 679
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1622
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 352
【代码】el-popover弹框自定义位置。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1018
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
WebAPI学习笔记：DOM文档对象模型解析
"WebAPI-day-01.md 是一篇关于Web API和DOM操作的学习笔记，适合自我复习和分享。笔记涵盖了DOM的基本概念、元素获取方法以及事件处理的相关内容。" 在Web开发中，Web API（Web应用程序接口）是一组用于与浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

进击的文文文

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

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

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

打赏作者

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

抵扣说明：

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

余额充值