WEB APIs(1)

变量声明const(修饰常量)

const优先,如react,基本const,

对于引用数据类型,可用const声明,因为储存的是地址

何为APIs

可以使用js操作HTML和浏览器

分类:DOM(文档对象模型)和BOM(浏览器对象模型)

DOM

是浏览器提供的一套用来操作网页内容的功能;

呈现以及与任意HTML文档交互的(开发网页内容特效和实现用户交互)

DOM树

将HTML文档以树状结构表现出来

体现标签与标签关系

DOM对象

根据HTML标签生成js对象

所有标签属性都能在这个对象上面找到,修改对象属性即可映射到标签身上

核心:把网页内容当对象处理

获取DOM对象

1.根据css选择器获取一个DOM元素

语法:(只选择匹配的第一个元素)

document.querySelector(‘css选择器’)

可以对DOM元素直接操作修改

参数:

一个或多个有效css选择器 字符串

返回值:

选择器匹配的第一个元素

2.如果选择多个选择器

document.querySelectorAll(‘css选择器’)

返回值:

css选择器匹配的NodeList 对象集合

不可以对DOM元素直接操作修改

因为得到的数组是伪数组,只有长度和索引号,没有相关函数

修改元素内容

操作标签的本质是操作DOM对象

对象.innerText 属性

获取文字内容,显示纯文本,不解析标签

对象.innerHTML 属性

不同于 对象.innerText 属性,可以识别标签

操作元素属性

1.操作元素常用属性

可以通过js设置/修改标签元素属性,如src更换图片

语法:

对象.属性=值

2.操作元素样式属性

语法

对象.style.属性='值'

特殊的,如background-color

用小驼峰命名法:

3.类名操作css

修改样式多会变繁琐,可以借助css类名

语法:

//active是类名

元素.className='active'

className会覆盖之前的类名,想保留原来类名,把原来类名添加到className

4.通过classList操作类控制css

为解决className易覆盖类名问题,可通过classList方法追加和删除类名

语法:

.remove变为

div.classList.toggle('box') //有就删掉,没有就加上

3.操作表单元素属性

获取:DOM对象.属性

设置:DOM对象.属性=新值

获取表单元素

const input = document.querySelector('input')

获取表单里的值用 表单.value

innerHTML得不到表单内容

表单属性中添加有效果,移除则效果消失,一律用布尔值

如:disabled、checked、selected

input.checked=true 即可勾选上

button。disabled=true 使按钮禁用

自定义属性

data-自定义属性

标签一律以data-开头

在DOM对象上一律以dataset(数据集合)对象方式获取

定时器-间歇函数

开启定时器

setInterval(函数,间隔时间)

间隔一段时间调用一次函数(毫秒)

应用了匿名函数:

如果不是匿名函数不要加小括号,会导致直接被调用一次,之后不会再被周期性调用了

关闭定时器

注意:定时器会返回一个独一无二的id号

语法:

clearinterval(变量名)  即可关闭

一般都会满足某些条件

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

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

相关文章

Rust - 切片Slice

Slice类型 Slice数据类型没有所有权,slice允许我们引用集合中一段连续的元素序列而不用引用整个集合。字符串slice(string slice) 是String中 一部分值的引用。如下述代码示例,不是对整个String的引用而是对部分String的引用: fn main() {l…

代码随想录算法训练营Day27|回溯算法·组合总和、组合总和II、分割回文串

组合总和 class Solution{ private:vector<vector<int>>result;vector<int>path;void backtracking(vector<int>& candidates,int target,int sum,int startIndex){if(sum > target){return;}if(sum target){result.push_back(path);return;}…

Python之:如何使用双重for循环输出九九乘法表?

文章目录 前言源代码 前言 如何用for双重循环输出九九乘法表&#xff1f;教程来咯&#xff01; 源代码 代码如下&#xff1a; for i in range(1, 10):for j in range(1, i1):print(f{j}{i}{i*j}\t, end)print()你学会了吗&#xff1f;效果如下&#xff1a; 想看详解&#…

【贪心算法】代码随想录算法训练营第三十二天 |122.买卖股票的最佳时机II,55.跳跃游戏,45.跳跃游戏II(待补充)

122.买卖股票的最佳时机II&#xff08;未观看&#xff0c;动态待补充&#xff09; 1、题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 2、文章讲解&#xff1a;代码随想录 3、题目&#xff1a; 给定一个数组&#xff0c;它的…

猫头虎分享已解决Bug || DNS解析问题(DNS Resolution Issue):DNSLookupFailure, DNSResolveError

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

谈谈Lombok的坑

Lombok 是一个 Java 库&#xff0c;通过注解的方式在编译时自动为类生成 getter、setter、equals、hashCode 等方法&#xff0c;以简化代码和提高开发效率。本文主要谈谈代码简化背后的代价。 引入Lombok之前是怎么做的 IDE中添加getter/setter, toString等代码&#xff1a; …

springboot190基于springboot框架的工作流程管理系统的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

.target勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 网络安全威胁如勒索病毒已经成为企业和个人数据安全的重大挑战之一。.target勒索病毒作为其中的一种&#xff0c;以其高度复杂的加密算法和迅速变化的攻击手法备受关注。本文将深入介绍.target勒索病毒的特点&#xff0c;探讨如何有效地恢复被加密的数据文件…

【学网攻】 第(28)节 -- OSPF虚链路

系列文章目录 目录 系列文章目录 文章目录 前言 一、什么是OSPF虚链路&#xff1f; 二、实验 1.引入 实验目标 实验背景 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 扩展 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻…

【从Python基础到深度学习】4. Linux常用命令(进阶)

接上篇 【从Python基础到深度学习】4. Linux 常用命令-CSDN博客 1.文件查找 - find 命令 find [搜索路径] [搜索条件] [操作]1.1 常用选项和参数 -name&#xff1a;按文件名搜索。 find 命令的 -name 选项可以接受通配符来匹配文件名。通配符可以帮助你更灵活地搜索文件名&a…

尚硅谷最新Node.js 学习笔记(三)

目录 六、Node.js 模块化 6.1、介绍 什么是模块化与模块&#xff1f; 什么是模块化项目&#xff1f; 模块化好处 6.2、模块暴露数据 模块初体验 暴露数据 6.3、导入&#xff08;引入&#xff09;模块 6.4、导入模块的基本流程 6.5、CommonJS规范 七、包管理工具 7…

第11集《佛说四十二章经》

和尚尼慈悲&#xff01;诸位法师、诸位居士&#xff0c;阿弥陀佛&#xff01; 请大家打开讲议第十四面&#xff0c;第二十七章、无着得道。 唯识学说&#xff0c;我们生命的相貌是恒转如瀑流&#xff0c;生命是一条没有止尽的水流&#xff0c;从过去流到现在&#xff0c;再从…