Js-web APIs(一)

目录

Web API 基本认知

• 作用和分类

• 什么是DOM

• DOM树

• DOM对象(重要)

获取DOM对象

• 根据CSS选择器来获取DOM元素 (重点)

1.选择匹配的第一个元素

 2.选择匹配的多个元素

• 其他获取DOM元素方法(了解)

操作元素内容

• 对象.innerText 属性

• 对象.innerHTML 属性

操作元素属性

• 操作元素常用属性

• 操作元素样式属性

• 操作 表单元素 属性

• 自定义属性


Web API 基本认知

• 作用和分类

Web APIs的作用是什么?

  • 就是使用 JS 去操作 html 和浏览器

Web APIs由什么组成?

  • DOM (文档对象模型)、BOM(浏览器对象模型)


• 什么是DOM

  • DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
  • 白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能(API)

DOM作用

  •  开发网页内容特效和实现用户交互


• DOM树

  • DOM树是什么
  • HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
  • 描述网页内容关系的名词
  • 作用:文档树直观的体现了标签与标签之间的关系


• DOM对象(重要)

DOM对象:浏览器根据html标签生成的 JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

  • 把网页内容当做对象来处理

document 对象

  • 是 DOM 里提供的一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
  • 例:document.write()
  • 网页所有内容都在document里面

获取DOM对象

提问:我们想要操作某个标签首先做什么?

答案:当然是先找到这个对象,跟 CSS选择器类似,选中标签才能操作

获取方式:

  • 根据CSS选择器来获取DOM元素 (重点)
  • 其他获取DOM元素方法(了解)

• 根据CSS选择器来获取DOM元素 (重点)

1.选择匹配的第一个元素

语法:

 参数:

  • 包含一个或多个有效的CSS选择器 字符串

返回值:

  • CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到,则返回null。

多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

 2.选择匹配的多个元素

语法:

参数: 

  • 包含一个或多个有效的CSS选择器 字符串

返回值:

  • CSS选择器匹配的NodeList 对象集合

注意:

通过querySelectAll() 获取过来是一个伪数组

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象,则需要遍历(for)的方式获得。

注意点:document.querySelector(参数),还是document.querySelectorAll(参数),里面的参数都是css选择器,直白点就是里面的参数和css的选择器的用法是一模一样的,类选择器需要加.,id选择器需要加#

总结:

1. 获取页面中的标签我们最终常用那两种方式?

  • querySelectorAll()
  • querySelector()

2. 他们两者的区别是什么?

  • querySelector() 只能选择一个元素, 可以直接操作
  • querySelectorAll() 可以选择多个元素,得到的是伪数组,需要遍历得到每一个元素

3. 他们两者小括号里面的参数有神马注意事项?

  • 里面写css选择器
  • 必须是字符串,也就是必须加引号


• 其他获取DOM元素方法(了解)

这是旧版的写法 

操作元素内容

• 对象.innerText 属性

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本,不解析标签

• 对象.innerHTML 属性

  • 将文本内容添加/更新到任意标签位置
  • 会解析标签,多标签建议使用模板字符

总结

1. 设置/修改DOM元素内容有哪2钟方式?

  • 元素.innerText 属性
  • 元素.innerHTML 属性

2. 三者的区别是什么?

  • 元素.innerText 属性 只识别文本,不能解析标签
  • 元素.innerHTML 属性 能识别文本,能够解析标签
  • 如果还在纠结到底用谁,你可以选择innerHTML

操作元素属性

• 操作元素常用属性

  • 通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
  • 最常见的属性比如: href、title、src 等

语法:

练习案例:页面刷新,图片随机更换

需求:当我们刷新页面,页面中的图片随机显示不同的图片
分析:
①:随机显示,则需要用到随机函数
②:更换图片需要用到图片的 src 属性,进行修改
③:核心思路:

  1. 获取图片元素
  2. 随机得到图片序号
  3. 图片.src = 图片随机路径
<!DOCTYPE html>
<html lang="zh_CN">
<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><img src="./images/1.webp" alt=""></div><script>//生成一个N-M的随机数function getRandom(n,m){return Math.floor(Math.random() * (m-n+1)+n)}let random = getRandom(1,6);//1 获取元素对象let img = document.querySelector('img')// 2 更改对象的src属性img.src = `./images/${random}.webp`</script>
</body>
</html>


• 操作元素样式属性

方式:
1. 通过 style 属性操作CSS
2. 操作类名(className) 操作CSS
3. 通过 classList 操作类控制CSS

  • 通过 style 属性操作CSS
  • 语法:

  •  操作类名(className) 操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。

语法:

注意:
1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

  • 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

语法:

 案例:轮播图随机版

需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式
模块:
①:图片会随机变换
②:底部盒子背景颜色和文字内容会变换
③:小圆点随机一个高亮显示

<!DOCTYPE html>
<html lang="zh_CN"><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>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li ></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]//1 生成一个随机数let random = parseInt(Math.random()*sliderData.length)//2 获取图片对象const img = document.querySelector('.slider-wrapper img')// 修改对象的src属性   图片对象的src属性 === 数组随机对象中的url属性img.src = sliderData[random].url//3 获取p对象const p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[random].title//4 获取li对象,并修改cssconst li = document.querySelector(`.slider-indicator li:nth-child(${random+1})`)li.classList.add('active')</script>
</body></html>


• 操作 表单元素 属性

  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
  • 正常的有属性有取值的 跟其他的标签属性没有任何区别

  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
  • 比如: disabled、checked、selected 


• 自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、 selected

自定义属性:

  • 在html5中推出来了专门的data-自定义属性
  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取

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

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

相关文章

Lua从电脑端爬取短视频评论并作商业化分析

之前有个大客户让我写一篇关于抓取短视频评论数据的单子&#xff0c;说是帮助公司寻找意向客户以及所对应产品在短视频里面的展现以及热门程度&#xff0c;通过数据采集方式并作数据自动化分析&#xff0c;从而实现商业上的价值。对于我来说写个爬虫还不简单&#xff0c;通过三…

鸿蒙Harmony-列表组件(List)详解

不要和别人比生活&#xff0c;每个人阶段不同&#xff0c;追求不同&#xff0c;活法自然也不同。只要今天的你能比昨天的你快乐一点点&#xff0c;那你就是自己人生赢家。 目录 一&#xff0c;定义 二&#xff0c;布局与约束 2.1 布局 2.2 约束 三&#xff0c;开发布局 3.1 设置…

DC电源模块在新能源领域的应用前景

BOSHIDA DC电源模块在新能源领域的应用前景 DC电源模块在新能源领域有着广阔的应用前景。随着可再生能源技术的发展和普及&#xff0c;如太阳能和风能等的应用逐渐增多&#xff0c;DC电源模块在这些领域的应用越来越重要。 首先&#xff0c;DC电源模块可以用于太阳能发电系统…

使用micro-app将现有项目改造成微前端,对现有项目实现增量升级

使用micro-app将现有项目改造成微前端&#xff0c;对现有项目实现增量升级 基座应用 1、安装依赖 npm i micro-zoe/micro-app --save2、在入口引入 //main.js import microApp from micro-zoe/micro-appnew Vue({ }) //在new Vue 下面执行 microApp.start()3、新增一个vue页…

【目标检测】评价指标:mAP概念及其计算方法(yolo源码/pycocotools)

本篇文章首先介绍目标检测任务中的关键评价指标mAP的概念&#xff1b;然后介绍其在yolo源码和pycocotools工具中的实现方法&#xff1b;最后比较两种mAP的计算方法的不同之处。 目标检测中的评价指标&#xff1a; mAP概念及其计算方法(yolo源码/pycocotools) 混淆矩阵概念及其…

ArcGIS Pro中怎么加载在线地图

当我们在制图的时候&#xff0c;有的时候需要加载在线地图&#xff0c;在ArcGIS Pro中加载在线地图的方式有很多&#xff0c;这里为大家介绍一下加载的方法&#xff0c;希望能对你有所帮助。 加载底图 在菜单栏上选择地图&#xff0c;点击底图&#xff0c;可以看到所有可加载…

FTP文件传输协议 、多种方式安装yum仓库

一、网络文件共享服务 1.存储类型分三种&#xff1a; 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff08;可以使用空间&#xff0c;管理也是你来管理&#xff09; 网络附加存储…

maxwell同步全量历史数据

CentOS安装maxwell 在上篇的基础上&#xff0c;我们实现了实时同步mysql数据到kafka。maxwell不仅可以同步实时数据&#xff0c;也可以同步全量历史数据。在这里模拟一下历史数据的场景&#xff0c;创建表结构如下&#xff0c;并写入测试数据。 CREATE TABLE user_det…

手把手教你搭建一个数据可视化看板

前言 俗话说的好&#xff0c;“字不如表&#xff0c;表不如图”、“有图有真相&#xff0c;一图胜千言”。 数据可视化就是用图的形式把基础数据直观&#xff0c;简洁的&#xff0c;高效的展示出来&#xff0c;今天为大家介绍一下如何使用葡萄城公司的嵌入式BI工具——Wyn商业…

JavaScript的Class基本语法

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 JavaScript是一种基于原型的语言&#xff0c;但在ES6中引入了class关…

成功解决VScode进入到内置函数中调试

主要有两个关键步骤&#xff0c; 第一步 将launch.json中的"justMyCode"设为false 可通过使用ctrlshiftP搜索lauch.json找到次文件 如果找不到的话&#xff0c;可点击debug按钮&#xff0c;然后找到点击create a launch.json file创建 创建得到的launch.json如下&am…

32单片机RTC时间接续,掉电时间保存

1、实现思路 前提&#xff1a;首先要实现RTC掉电之后时间还能继续走&#xff0c;RTC电池是必要的 说明&#xff1a;设备第一次启动需要初始化配置RTC&#xff0c;但当二次启动再重新配置RTC会导致RTC计数器置零&#xff0c;所以传统的程序流程是不行的&#xff0c;我们需要知…

2024“华数杯”(A题)|放射性废水扩散|国际大学生数学建模竞赛建模解析,小鹿学长带队指引全代码文章与思路

我是小鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 完整内容可以在文章末尾领取&#xff01; 这回带大家体验一下2024“华数杯”国际大学生数学建模竞赛呀&#xff01; 此题涉及到放射性废水从日本排放…

齿轮齿条运动相关计算(博途S7-1200PLC脉冲轴组态)

有关S7-1200PLC脉冲轴相关应用介绍请参考下面的系列文章: S7-1200PLC脉冲轴位置控制功能块 https://rxxw-control.blog.csdn.net/article/details/135299302https://rxxw-control.blog.csdn.net/article/details/135299302S7-1200脉冲轴功能块 https://rxxw-control.blog.c…

如何在 Python3 中使用变量

介绍 变量是一个重要的编程概念&#xff0c;值得掌握。它们本质上是在程序中用于表示值的符号。 本教程将涵盖一些变量基础知识&#xff0c;以及如何在您创建的 Python 3 程序中最好地使用它们。 理解变量 从技术角度来说&#xff0c;变量是将存储位置分配给与符号名称或标…

【JVM调优系列】如何导出堆内存文件

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

图像处理------亮度

from PIL import Imagedef change_brightness(img: Image, level: float) -> Image:"""按照给定的亮度等级&#xff0c;改变图片的亮度"""def brightness(c: int) -> float:return 128 level (c - 128)if not -255.0 < level < 25…

leetcode234. 回文链表

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;hea…

《手把手教你》系列技巧篇(十)-java+ selenium自动化测试-元素定位大法之By class name(详细教程)

1.简介 按宏哥计划&#xff0c;本文继续介绍WebDriver关于元素定位大法&#xff0c;这篇介绍By ClassName。看到ID&#xff0c;NAME这些方法的讲解&#xff0c;小伙伴们和童鞋们应该知道&#xff0c;要做好Web自动化测试&#xff0c;最好是需要了解一些前端的基本知识。有了前端…