1.BOM-获取元素(获取元素、修改属性)

web Api基本认知

作用:通过JS去操作html页面和浏览器(实现浏览器中的某些功能)
分类:
DOM(网页):Document Object Model(文档对象模型)
BOM(浏览器):Borwser Object Model(浏览器对象模型)

DOM

DOM树

将网页中标签的关系以树状结构表现出来
在这里插入图片描述

DOM对象

浏览器根据html标签生成的JS对象
a)所有的标签属性都可以在这个对象上面找到
b)修改这个对象的属性会自动映射到标签身上
DOM核心思想:把网页内容当做对象来处理

document对象

a)是DOM里提供的一个对象
b)它提供的属性和方法都是用来访问和操作网页内容的
c)网页所有内容都在document里面

获取DOM对象

querySelector(‘选择器’)

    <div><ul><li></li></ul></div><script>//获取页面中的标签语法://a) document.querySelector('CSS选择器')  //注意,参数就是一个字符串,字符串就是各种css选择器let res = document.querySelector('div')// b)有返回值:返回的结果就是当前标签(标签对象)console.log(res)let res2 = document.querySelector(' div ul li') //通过后代选择器获取了li标签console.log(res2)</script>

在这里插入图片描述

querySelectorAll
    <div>文字1</div><div>文字2</div><div>文字3</div><div>文字4</div><script>let res = document.querySelector('div')   //querySelector只能获取满足条件的第一个标签console.log(res)//document.querySelectorAll('css选择器')  //可以获取到所有满足条件的标签  #id .class是css选择器let res2 = document.querySelectorAll('div')  //得到的是一个伪数组(伪数组也是一个数组,但是不能使用数组方法)console.log(res2) //数组中每一个值都是标签对象console.log(res2[1])</script>

在这里插入图片描述
如何界定返回的结果是伪数组呢?如果返回的结果没有Array就是伪数组
伪数组不能使用数组中的方法,但是伪数组依然可以使用for循环遍历,因为for循环不是数组中的方法

其他获取DOM元素的方法(了解)
   <div id="one" class="test1">文字1</div><div id="two" class="test2">文字2</div><div id="three">文字3</div><div class="test1">文字4</div><script>//  1.其他方式获取标签// a)通过标签的id获取标签对象// 总结:因为标签的id唯一,所以通过getElementById()只能获取一个标签const div = document.getElementById('one')console.log(div)//b)通过标签的名字获取标签对象// document.getElementsByTagName('标签名')console.log(document.getElementsByTagName('div'))  //得到一个伪数组// c)通过标签类名获取标签// document.getElementsByClassName('类名')//类名前面不能加点,加点就变成了类选择器let res = document.getElementsByClassName('test1')console.log(res)</script>

在这里插入图片描述

操作元素内容

获取标签中的内容

  <div id="one" class="test1"><p>文字1</p></div><div id="two" class="test2">文字2</div><div id="three">文字3</div><div class="test1">文字4</div><div id="five"></div><script>//获取标签中的内容// 赋值语法:// DOM标签对象.innerHTML=值// DOM标签对象.innerText=值//获取值语法:获取标签中的内容// DOM标签对象.innerHTML;// DOM标签对象.innerText;const div = document.querySelector('#one')//   二者的区别://a) 如果标签内只有纯粹的文字,则innerHTML和innerText没有任何区别// b)如果标签中有文字+html标签,则innerHTML既可以获取文字也可以获取对应的HTML标签console.log(div.innerHTML)console.log(div.innerText)//给标签设置文字内容,会覆盖掉标签内原来的内容div.innerHTML = '呵呵呵呵'console.log(div.innerHTML)  //非纯文本标签也覆盖掉了div.innerHTML = '<h1>呵呵呵呵</h1>'  //innerHTML中的标签页会被渲染上去,而innerText的标签会被当成纯文本渲染</script>

在这里插入图片描述

操作元素属性

操作img的src属性

    <img src="../image/1.jpg" alt=""><script>// 操作图片标签中的src属性// a)获取图片的src属性// 语法:DOM标签对象.srcconst img = document.querySelector('img')let res = img.src //获得的是绝对路径console.log(res)// b)给图片标签设置src属性// 语法:DOM标签对象.src=值;img.src = '../image/2.jpg'

操作标签的样式属性

    <div></div><script>//操作标签的样式属性//1.行内式   //本质上通过操作标签的style属性实现//2.外联式  //本质都是通过选择器实现的//3.内嵌式  //本质都是通过选择器实现的//通过操作标签的style属性实现给标签设置样式的//语法:DOM标签对象.style.css属性=值let div = document.querySelector('div')div.style.backgroundColor = 'red'div.style.border = '2px solid blue'//通过行内样式一次可以给标签加若干标签属性,单独设置即可//style也是一个对象。那么style中有哪些属性我们才可以用 。可以通过console.log(div.style)查阅</script>

在这里插入图片描述

操作标签的类样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 200px;width: 200px;background-color: red;border: 5px solid blue;border-radius: 50%;}</style>
</head><body><div></div><script>// 1.操作标签的类样式// 语法:DOM标签对象.className='类名'// 代码演示// 1.定义一个样式// 2.获取div标签let div = document.querySelector('div')// 3.给div标签设置类样式div.className = 'box'// 通过className操作标签样式总结// a)如何给标签添加多个类名?只要在类命中加上空格       div.className = 'box  bd  w'//b)通过className操作标签类名的时候,会覆盖标签原来的类名//c)如果不希望覆盖原来的类名,将原来的类名再次添加//d)className设置的值必须是类名,不能加点//操作类样式终级写法(推荐写法)://添加类名:DOM标签对象.classList.add('类名');//不会覆盖原来的类名//删除类名:DOM标签对象.classList.remove('类名')//切换类名:DOM标签对象.classList.toggle('类名')//类似开关,如果没有点击加上,如果有该类名,点击删除//判断是否包含类名:DOM标签对象.classList.contains('类名')</script>
</body></html>

在这里插入图片描述

定时器-间歇函数

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

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

相关文章

利用excel批量修改图片文件名

今天同事提出需求要实现利用excel批量修改某文件夹下的图片重命名&#xff0c;衡量到各种条件&#xff0c;最后还是选择了vbs来实现。代码如下 代码 创建Excel对象 Set objExcel CreateObject("Excel.Application") objExcel.Visible False 隐藏Excel窗口 打开Ex…

react:usecontext使用

useContext返回 调用组件上方最近的 SomeContext.Provider 的 value 如果没有这样的 provider 传递给 createContext 的 defaultValue。返回的值始终是最新的。 如果 context 发生变化&#xff0c;React 会自动重新渲染读取 context 的组件。 <Context.Provider> 需要位于…

【MySQL知识体系】第2章 数据库与表的创建(一)

第2章 数据库与表的创建 2.1 数据库操作 2.2 表操作 文章目录 第2章 数据库与表的创建2.1 数据库操作2.1.1 创建第一个数据库2.1.2 更新数据库名称&#xff08;数据库创建后无法修改名称&#xff09;2.1.3 删除数据库2.1.4 取个合适的数据库名称 第2章 数据库与表的创建 2.1 数…

990-40产品经理:What Is Effective Written Communication? 什么是有效的书面沟通?

The purpose of written communication is to capture your reader’s attention and get your point across clearly. Ultimately, when you communicate in writing, you are helping the reader understand your perspective看法 on a topic. There are certain qualities a…

在 echarts 的 rich 中使用 iconfont 图标库图标作为 backgroundColor.image 值的方法

实现步骤 1、引入 iconfont.js。该脚本执行时&#xff0c;会在 body 下插入一个 svg 标签&#xff0c;标签下包含了图标库中的 svg 图标 path。 <script src"your/iconfont/path/iconfont.js"></script>或者 import your/iconfont/path/iconfont.js2、…

【学习心得】websocket协议简介并与http协议对比

一、轮询和长轮询 在websocket协议出现之前&#xff0c;要想实现服务器和客户端的双向持久通信采取的是Ajax轮询。它的原理是每隔一段时间客户端就给服务器发送请求找服务器要数据。 让我们通过一个生活化的比喻来解释轮询和长轮询假设你正在与一位不怎么主动说话的老大爷&…

基于R语言lavaan的SEM在复杂统计建模中的科研技术新突破

此外&#xff0c;我们还将深入探讨R语言的基础知识、结构方程模型的基本原理、lavaan程序包的使用方法等内容。无论是潜变量分析、复合变量分析&#xff0c;还是非线性/非正态/缺失数据处理、分类变量分析、分组数据处理等复杂问题&#xff0c;我们都将一一为您解析。 希望通过…

3.7作业

网络聊天室&#xff1a; 程序代码&#xff1a; ser.c #include <myhead.h> //定义消息类型结构体 struct xiaoxi {char type;char name[20];char text[100]; };int main(int argc, const char* argv[]) {// 创建套接字int sfd socket(AF_INET, SOCK_STREAM, 0);if (s…

Spring源码:手写AOP

文章目录 一、概念1、AOP是什么&#xff1f;2、相关概念1&#xff09;目标对象Target2&#xff09;通知Advice3&#xff09;连接点Joinpoint4&#xff09;切点Pointcut5&#xff09;切面Aspect6&#xff09;织入Weaving 二、分析三、实现1、实现Advice1&#xff09;前置通知2&a…

蓝桥杯-Stack

Stack实例化步骤 1导包&#xff0c;导入java.util.* 2实例化对象&#xff0c;格式如下 Stack<引用数据类型> stacknew Stack<>(); Stack特点&#xff1a;先进后出。比如1&#xff0c;2&#xff0c;3依次入栈&#xff0c;出栈顺序就是3&#xff0c;2&#xff0c…

企业微信HOOK协议,新设备二次验证处理

提示设备强制二次验证问题已处理 HOOK&#xff1a;https://www.showdoc.com.cn/1663062930779972/7859611259700402密码&#xff1a;999999999

大数据冷热分离方案

数据冷热分离方案 1、背景 ​ 随着业务的发展&#xff0c;在线表中的数据会逐渐增加。常规业务都有冷热数据现象明显的特性&#xff08;需要访问的都是近期产生的热数据&#xff1b;时间久远的冷数据出于备份、备案溯源等诉求会进行在线保留&#xff09;。在业务表数据 量可控…

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

上期解析了下adb端口备份分区的有关操作 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 在以往的博文中对于高通芯片机型的分区读写已经分享了很多。相关类似博文 安卓备份分区----手动查询安卓系统分区信息 导出系统分区的一些基本操作 …

设计模式之构建者模式

构建者模式&#xff08;Builder&#xff09; 定义 将一个复杂对象的构建与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示 使用场景 主要角色 产品 Product建造者接口 Builder具体的建造者 Concrete Builder指挥者 Director:组织构建过程 示例代码 Data p…

0x04_数组_指针_字符串

数组 数组的定义与使用 数组是具有一定顺序关系的若干相同类型变量的集合体&#xff0c;组成数组的变量称为该数组的元素。 给出下面程序的输出&#xff1a; #include <iostream> using namespace std; int main() {int a[10], b[10];for(int i 0; i < 10; i) {a[…

Redis高可用方案

Redis的高可用架构模式及相关配置命令是构建稳定、可靠Redis环境的关键。以下是一些主要的Redis高可用架构模式及其配置方法&#xff1a; 主从复制&#xff08;Master-Slave&#xff09; 主从复制模式实现了Redis数据的备份和读取操作的负载均衡。在这个模式中&#xff0c;一台…

python 基础知识点(蓝桥杯python科目个人复习计划59)

今日复习内容&#xff1a;做题 例题1&#xff1a;建造房屋 问题描述&#xff1a; 小蓝和小桥是两位年轻的建筑师&#xff0c;他们正在设计一座新的城市。 在这个城市中&#xff0c;有N条街道&#xff0c;每条街道上有M个位置可以建造房屋&#xff08;一个位置只能建造一个房…

迷宫641更优解——蓝桥杯2017

1.优解思路&#xff1a; 秒啊&#xff1a;如果这条路可以走通&#xff0c;则这条路上所有点都可以走通&#xff0c;反之若不可以&#xff0c;则都不可以。 因为比如一个点走了&#xff0c;没走通&#xff0c;这条路上的点都出不去&#xff0c;假如有别的点走路走到这条死路上…

2024.3.7 FreeRTOS 作业

思维导图 练习题 1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 //打开定时器3的通道3&#xff0c;并且设置为PWM功能HAL_TIM_PWM_Start(&htim3, TIM_CHANNEL_3);/* USER CODE END 2 *//* Infinite loop *//* USER CODE BEGIN WHILE */while (1…

【Spring云原生系列】Spring Cloud Stream:消息驱动架构(MDA)解析,实现异步处理与解耦合!

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…