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

server/2025/1/20 20:45:49/

 黑马程序员视频地址:黑马程序员前端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.自定义属性


定时器(间歇函数)

开启定时器


关闭定时器


http://www.ppmy.cn/server/159982.html

相关文章

什么是报文的大端和小端,有没有什么记忆口诀?

在计算机科学中,**大端(Big-Endian)和小端(Little-Endian)**是两种不同的字节序(即多字节数据在内存中的存储顺序)。理解这两种字节序对于网络通信、文件格式解析以及跨平台编程等非常重要。 1…

51c自动驾驶~合集47

我自己的原文哦~ https://blog.51cto.com/whaosoft/13083194 #DreamDrive 性能爆拉30%!英伟达:时空一致下的生成重建大一统新方案~ 从自车的驾驶轨迹中生成真实的视觉图像是实现自动驾驶模型可扩展训练的关键一步。基于重建的方法从log中生成3D场景…

02、Redis从入门到放弃 之 常用命令和基本数据类型操作

Redis从入门到放弃 之 常用命令和基本数据类型操作 一、Redis通用命令 redis-cli -h 127.0.0.1 -p 6379 redis客户端登录 -h host -p 端口 -a 密码exit 退出当前客户端info 返回redis的一些相关信息(包括端口、配置文件等)flushdb 清空当前库…

【探寻C++之旅】第二章:类和对象(上)

请君浏览 前言1. 类和对象是什么2. 类的定义2.1 类定义的格式2.2 访问限定符2.3 类域 3. 实例化3.1 实例化概念3.2 对象大小 4. this指针5. C和C语言实现Stack(栈)的对比尾声 前言 今天,我们继续踏入追寻C的冒险历程。上一章我们简单介绍了C中…

C# OpenCV机器视觉:常用滤波算法

在一个电闪雷鸣的夜晚,阿强的实验室里却灯火通明,宛如黑暗中的科技孤岛。窗外狂风呼啸,大雨倾盆,仿佛是世界末日的序曲;而屋内,阿强正对着电脑屏幕愁眉苦脸,屏幕上是一张张 “惨不忍睹” 的图像…

高性能、并发安全的 Go 嵌入式缓存库 如何使用?

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons:JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram,自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ? 5 IDEA必装的插件&…

【MVCC过程中会加锁吗?】

MVCC过程中会加锁吗? 一、MVCC的工作原理二、MVCC的并发控制三、MVCC中的加锁情况在MVCC(Multi-Version Concurrency Control,多版本并发控制)过程中, 通常不需要加锁来控制并发访问。 MVCC是一种数据并发控制技术,它允许在不同的事务中对同一数据进行并发访问,而不需要…

Android中下载 HAXM 报错 HAXM installation failed,如何解决?

AMD芯片的电脑在 Android Studio 中安装 Virtual Device 时,经常会出现一个 问题 Intel HAXM installation failed. To install Intel HAXM follow the instructions found at: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows 一直提示H…