当前位置: 首页 > news >正文

JavaScript笔记APIs篇01——DOM获取与属性操作

 黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78 

目录

变量声明的选择 

基本数据类型 

引用数据类型

DOM获取与属性操作

Web API 基本认识

作用和分类

什么是DOM

DOM树

DOM对象

获取DOM对象

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

选择匹配的多个元素

其他获取DOM元素方法

操作元素内容

元素.innerText 属性

元素.innerHTML 属性

操作元素属性

1.常用属性(标签内置属性 src等)

2.样式属性(CSS修饰属性)

通过style属性操作CSS

通过类名(className)操作CSS

通过classList操作CSS

3.表单元素属性

4.自定义属性

定时器(间歇函数)

开启定时器

关闭定时器


变量声明的选择 


基本数据类型 

 


引用数据类型


DOM获取与属性操作

Web API 基本认识

作用和分类


什么是DOM


DOM树


DOM对象


获取DOM对象

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

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


选择匹配的多个元素


其他获取DOM元素方法


操作元素内容

元素.innerText 属性


元素.innerHTML 属性


操作元素属性

1.常用属性(标签内置属性 src等)


2.样式属性(CSS修饰属性)

通过style属性操作CSS


通过类名(className)操作CSS


通过classList操作CSS


3.表单元素属性

 


4.自定义属性


定时器(间歇函数)

开启定时器


关闭定时器

相关文章:

JavaScript笔记APIs篇01——DOM获取与属性操作

黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p78https://www.bilibili.com/video/BV1Y84y1L7Nn?…...

SQL表间关联查询详解

简介 本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(left join)、右连接(right join)、全连接(full join)、内连接(inner join)、交叉连接&…...

select函数

系统调用 select()可用于执行 I/O 多路复用操作&#xff0c;调用 select()会一直阻塞&#xff0c;直到某一个或多个文件描述符成为就绪态&#xff08;可以读或写&#xff09;。其函数原型如下所示&#xff1a; #include <sys/select.h> int select(int nfds, fd_set *re…...

建造者模式(或者称为生成器(构建器)模式)

一、什么是建造者模式&#xff1f; 将复杂对象的构建与表示进行分离&#xff0c;使得统一的构建过程&#xff0c;可以创建出不同的对象表现模式 就是将复杂对象里面的成员变量&#xff0c;设置不同的值&#xff0c;使得生成出来的对象拥有不同的属性值&#xff1b; 二、特点…...

【深度学习】Huber Loss详解

文章目录 1. Huber Loss 原理详解2. Pytorch 代码详解3.与 MSELoss、MAELoss 区别及各自优缺点3.1 MSELoss 均方误差损失3.2 MAELoss 平均绝对误差损失3.3 Huber Loss 4. 总结4.1 优化平滑4.2 梯度较好4.3 为什么说 MSE 是平滑的 1. Huber Loss 原理详解 Huber Loss 是一种结合…...

A5.Springboot-LLama3.2服务自动化构建(二)——Jenkins流水线构建配置初始化设置

下面我们接着上一篇文章《A4.Springboot-LLama3.2服务自动化构建(一)——构建docker镜像配置》继续往下分析,在自动化流水线构建过程当中的相关初始化设置和脚本编写。 一、首先需要先安装Jenkins 主部分请参考我前面写的一篇文章《Jenkins持续集成与交付安装配置》 二、…...

李宏毅机器学习HW1: COVID-19 Cases Prediction

Kaggle数据集和提交链接 特征选择&#xff08;主要修改地方&#xff09; 在sample code的基础上主要修改了Select_feat选择特征函数。 首先&#xff0c;因为数据集中的第一列是id&#xff0c;先在raw_x_train&#xff0c;raw_x_valid&#xff0c;raw_x_test中都去掉这一列。其…...

MySQL下载安装DataGrip可视化工具

目录 WinMySQL下载安装步骤MySQL配置添加环境变量 Mac下载安装配置环境变量 DataGrip可视化工具以Win为例了。Mac忘记截图了。步骤都一样 Win MySQL下载 官网&#xff1a; https://www.mysql.com/ 直接进下载界面&#xff1a; https://downloads.mysql.com/archives/installe…...

多平台下Informatica在医疗数据抽取中的应用

一、引言 1.医疗数据抽取与 Informatica 概述 1.1 医疗数据的特点与来源 1.1.1 数据特点 医疗数据具有显著的多样性特点。从数据类型来看&#xff0c;涵盖了结构化数据&#xff0c;如患者的基本信息、检验检查结果等&#xff0c;这些数据通常以表格形式存储&#xff0c;便于…...

用公网服务器实现内网穿透

首先需要一个公网服务器 下载frp 搜索github下载到frp&#xff0c;服务端frps/客户端frpc。。下载的时候要注意自己本地内网机的cpu版本和服务端cpu架构 我的电脑是mac M1PRO版本 下载的是&#xff1a;darwinarm64 比如 服务端一般是Linux&#xff08;Intel 64位CPU&#xf…...

为什么mysql更改表结构时,varchar超过255会锁表

在 MySQL 中&#xff0c;当修改表结构并将 VARCHAR 字段的长度设置为超过 255 时&#xff0c;可能会出现锁表的情况。这与 MySQL 的存储引擎&#xff08;主要是 InnoDB&#xff09;以及表的底层存储方式相关。 原因分析 行格式变化 InnoDB 存储引擎支持多种行格式&#xff08;…...

ASP.NET Core中 JWT 实现无感刷新Token

在 Web 应用开发中&#xff0c;用户登录状态的管理至关重要。为了避免用户频繁遇到登录过期的问题&#xff0c;我们可以通过实现 JWT&#xff08;JSON Web Token&#xff09;刷新机制来提升用户体验 推荐: 使用 Refresh Token&#xff08;双 Token 机制&#xff09; 1. 生成和…...

函数(函数的概念、库函数、自定义函数、形参和实参、return语句、数组做函数参数、嵌套调用和链式访问、函数的声明和定义、static和extern)

一、函数的概念 •C语⾔中的函数&#xff1a;⼀个完成某项特定的任务的⼀⼩段代码 •函数又被翻译为子函数&#xff08;更准确&#xff09; •在C语⾔中我们⼀般会⻅到两类函数&#xff1a;库函数 ⾃定义函数 二、库函数 1 .标准库和头文件 •C语⾔的国际标准ANSIC规定了⼀…...

物联网在烟草行业的应用

物联网技术在烟草行业的应用 物联网技术在烟草行业的应用主要体现在以下几个方面&#xff1a; 智能制造 &#xff1a;物联网技术可以实现对生产过程中的关键参数进行实时监测&#xff0c;确保产品的质量稳定可靠。同时&#xff0c;通过对设备的远程维护和故障诊断&#xff0c;…...

第6章:Python TDD实例变量私有化探索

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…...

Java操作Excel导入导出——POI、Hutool、EasyExcel

目录 一、POI导入导出 1.数据库导出为Excel文件 2.将Excel文件导入到数据库中 二、Hutool导入导出 1.数据库导出为Excel文件——属性名是列名 2.数据库导出为Excel文件——列名起别名 3.从Excel文件导入数据到数据库——属性名是列名 4.从Excel文件导入数据到数据库…...

BUUCTF_Web([GYCTF2020]Ezsqli)

1.输入1 &#xff0c;正常回显。 2.输入1 &#xff0c;报错false&#xff0c;为字符型注入&#xff0c;单引号闭合。 原因&#xff1a; https://mp.csdn.net/mp_blog/creation/editor/145170456 3.尝试查询字段&#xff0c;回显位置&#xff0c;数据库&#xff0c;都是这个。…...

微软宣布Win11 24H2进入新阶段!设备将自动下载更新

快科技1月19日消息&#xff0c;微软于1月16日更新了支持文档&#xff0c;宣布Windows 11 24H2进入新阶段。 24H2更新于2024年10月1日发布&#xff0c;此前为可选升级&#xff0c;如今微软开始在兼容的Windows 11设备上自动下载并安装24H2版本。 微软表示&#xff1a;“运行Wi…...

SpringBoot:解决前后端请求跨域问题(详细教程)

文章目录 一、前言二、解决方式 2.1 使用 CrossOrigin 注解&#xff08;简单方便&#xff0c;适用于单个或少量接口&#xff09;2.2 全局配置跨域&#xff08;适用于整个项目中大量接口都需要跨域的情况&#xff09;2.3 使用过滤器来处理跨域&#xff08;更底层的实现方式&…...

Android-V lmkd 中的那些属性值

源码基于&#xff1a;Android V 相关博文&#xff1a; Android lmkd 机制详解&#xff08;一&#xff09; Android lmkd 机制详解&#xff08;二&#xff09; Android lmkd 机制从R到T 1. 汇总 属性名说明默认值 ro.lmk.debug 启动 lmkd 的debug 模式&#xff0c;会打印一…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...