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

【JS】报错:Uncaught TypeError: Cannot read properties of null (reading ‘classList‘)

错误展示

今天写js代码的时候遇到报错:

源代码:

<ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul><script>const active = document.querySelector('.slider-indicator li .active')active.classList.remove('active')
</script>

找了许久也没找出来 ,在网上查询原因,说是因为li里至少需要有一个包含带有active类,但我的li里面确实是有包含了一个,那为什么还报错?

解决方法

原来是我把后代选择器和交集选择器弄混了,我上述js代码第一行中,li和.active不能带有空格,因为.active是直接应用在 <li> 标签上的类名,而不是 <li> 内部的某个元素!

修改后代码如下:

const active = document.querySelector('.slider-indicator li.active')

相关文章:

【JS】报错:Uncaught TypeError: Cannot read properties of null (reading ‘classList‘)

错误展示 今天写js代码的时候遇到报错&#xff1a; 源代码&#xff1a; <ul class"slider-indicator"><li class"active"></li><li></li><li></li><li></li><li></li><li><…...

kali2.0安装VMware Tools 和自定义改变分辨率

kali2.0安装VMware Tools 和自定义改变分辨率 VMware Tools 简介&#xff1a;VMware Tools安装&#xff1a;自定义改变分辨率&#xff1a;xrandr命令修改分辨率&#xff1a; 前言&#xff1a; 因为kali2.0比较老 所以需要手动安装 WMware Tools 进行复制粘贴操作&#xff01; …...

redis中根据通配符删除key

redis中根据通配符删除key 我们是不是在redis中keys user:*可以获取所有key&#xff0c;但是 del user:*却不行这里我提供的命令主要是SCANSCAN 0 MATCH user:* COUNT 100使用lua保证原子性 SCAN参数描述 在示例中&#xff0c;COUNT 被设置为 100。这是一个防止一次性获取大…...

【HDFS联邦(2)】HDFS Router-based Federation官网解读:HDFSRouterFederation的架构、各组件基本原理

文章目录 一. 介绍二、HDFS Router-based Federation 架构1. 示例说明2. Router2.1. Federated interface2.2. Router heartbeat2.3. NameNode heartbeat2.4. Availability and fault toleranceInterfaces 3. Quota management4. State Store 三、部署 ing 本文主要参考官网&am…...

【头歌实训】Spark 完全分布式的安装和部署

文章目录 第1关&#xff1a; Standalone 分布式集群搭建任务描述相关知识课程视频Spark分布式安装模式示例集群信息配置免密登录准备Spark安装包配置环境变量修改 spark-env.sh 配置文件修改 slaves 文件分发安装包启动spark验证安装 编程要求测试说明答案代码报错问题基本过程…...

Leetcode—86.分隔链表【中等】

2023每日刷题&#xff08;六十九&#xff09; Leetcode—86.分隔链表 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* partition(struct ListNode* head, int x) {struct ListNode…...

淘宝/天猫商品API:实时数据获取与安全隐私保护的指南

一、引言 随着电子商务的快速发展&#xff0c;淘宝/天猫等电商平台已成为商家和消费者的重要交易场所。对于电商企业而言&#xff0c;实时掌握店铺商品的销售情况、库存状态等信息至关重要。然而&#xff0c;手动管理和更新商品信息既费时又费力。因此&#xff0c;淘宝/天猫提…...

使用 SSH 方式实现 Git 远程连接GitHub

git是目前世界上最先进的分布式版本控制系统&#xff0c;相比于SVN&#xff0c;分布式版本系统的最大好处之一是在本地工作完全不需要考虑远程库的存在&#xff0c;也就是有没有联网都可以正常工作&#xff01;当有网络的时候&#xff0c;再把本地提交推送一下就完成了同步&…...

Centos7部署Keepalived+lvs服务

IP规划&#xff1a; 服务器IP地址主服务器20.0.0.22/24从服务器20.0.0.24/24Web-120.0.0.26/24Web-220.0.0.27/24 一、主服务器安装部署keepalivedlvs服务 1、调整/proc响应参数 关闭Linux内核的重定向参数&#xff0c;因为LVS负载服务器和两个页面服务器需要共用一个VIP地…...

12/31

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;用于密集预测的多路径视觉Transformer1、研究背景2、方法提出3、相关方法3.1、Vision Transformers for dense predictions3.2、C…...

python使用openpyxl为excel模版填充数据,生成多个Sheet页面

目标&#xff1a;希望根据一个给定的excel模版&#xff0c;生成多个Sheet页面&#xff0c;比如模版&#xff1a; 示例程序 import openpyxlexcel_workbook openpyxl.load_workbook("模版.xlsx") for _i in range(3): # 比如填充3个页面# 复制模版sheet页&#x…...

基于ssm的4S店预约保养系统开发+vue论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…...

【Git】Git的基本操作

前言 Git是当前最主流的版本管理器&#xff0c;它可以控制电脑上的所有格式的文件。 它对于开发人员&#xff0c;可以管理项目中的源代码文档。&#xff08;可以记录不同提交的修改细节&#xff0c;并且任意跳转版本&#xff09; 本篇博客基于最近对Git的学习&#xff0c;简单介…...

【超图】SuperMap iClient3D for WebGL/WebGPU —— 数据集合并缓存如何控制对象样式

作者&#xff1a;taco 最近在支持的过程中&#xff0c;遇到了一个新问题&#xff01;之前研究功能的时候竟然没有想到。通常我们控制单个对象的显隐、颜色、偏移的参数都是根据对象所在的图层以及对象单独的id来算的。那么问题来了&#xff0c;合并后的图层。他怎么控制单个对象…...

intellij IDEA开发工具的使用(打开/关闭工程;删除类文件;修改类/包/模块/项目名称;导入/删除模块)

1&#xff0c;打开工程 打开IDEA&#xff0c;会看到如下界面 1栏目里是自己曾经打开过的project&#xff08;工程&#xff09;&#xff0c;直接点击就好。如果需要打开其他工程&#xff0c;则点击open&#xff0c;会出下以下界面。 选择需要加载的project&#xff08;工程&…...

抖音详情API:开发环境搭建与工具选择

随着短视频的流行&#xff0c;抖音已经成为了一个备受欢迎的社交媒体平台。对于开发人员而言&#xff0c;利用抖音详情API开发定制化的抖音应用具有巨大的潜力。本文将为你详细介绍开发抖音应用的开发环境搭建与工具选择&#xff0c;帮助你顺利地开始开发工作。 一、开发环境搭…...

IntelliJ IDEA [插件 MybatisX] mapper和xml间跳转

文章目录 1. 安装插件2. 如何使用3. 主要功能总结 MybatisX 是一款为 IntelliJ IDEA 提供支持的 MyBatis 开发插件 它通过提供丰富的功能集&#xff0c;大大简化了 MyBatis XML 文件的编写、映射关系的可视化查看以及 SQL 语句的调试等操作。本文将介绍如何安装、配置和使用 In…...

Havenask 分布式索引构建服务 --Build Service

Havenask 是阿里巴巴智能引擎事业部自研的开源高性能搜索引擎&#xff0c;深度支持了包括淘宝、天猫、菜鸟、高德、饿了么在内几乎整个阿里的搜索业务。本文针对性介绍了 Havenask 分布式索引构建服务——Build Service&#xff0c;主打稳定、快速、易管理&#xff0c;是在线系…...

vscode软件安装步骤

目录 一、下载软件安装包 二、运行安装包后 一、下载软件安装包 打开vscode官方网址&#xff0c;找到下载界面 链接如下&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我是windows电脑&#xff0c;各位小伙伴自己选择合适的版本&#xff0c;点击下载按钮…...

C语言中灵活多变的动态内存,malloc函数 free函数 calloc函数 realloc函数

文章目录 &#x1f680;前言&#x1f680;管理动态内存的函数✈️malloc函数✈️free函数✈️calloc函数✈️realloc函数 &#x1f680;在使用动态内存函数时的常见错误✈️对NULL指针的解引用✈️ 对动态开辟空间的越界访问✈️对非动态开辟内存使用free释放✈️使用free释放一…...

Qt加载OBJ或STL模型文件,支持鼠标移动、缩放、旋转Demo

Qt加载模型文件obj或者stl实例&#xff0c;支持鼠标移动缩放旋转demo最近在捣鼓Qt的3D可视化功能&#xff0c;发现用Qt搞个模型查看器比想象中简单。咱们先整点实际的——做个能加载obj/stl模型&#xff0c;支持鼠标拖拽旋转、平移、缩放的demo。废话不多说&#xff0c;直接撸代…...

OpenClaw技能扩展:Qwen3.5-9B加持下的Markdown文章自动发布

OpenClaw技能扩展&#xff1a;Qwen3.5-9B加持下的Markdown文章自动发布 1. 从手动到自动的内容发布革命 作为一个技术博客作者&#xff0c;我每天最耗时的不是写作本身&#xff0c;而是反复复制粘贴内容到各个平台。上周尝试用OpenClawQwen3.5-9B实现公众号自动发布时&#x…...

Z-Image-Turbo-辉夜巫女开发者案例:对接Stable Diffusion WebUI插件生态的兼容方案

Z-Image-Turbo-辉夜巫女开发者案例&#xff1a;对接Stable Diffusion WebUI插件生态的兼容方案 1. 引言&#xff1a;当定制模型遇上主流生态 如果你是一位AI绘画的开发者或爱好者&#xff0c;手里有一个精心调校的、专门生成“辉夜巫女”风格的文生图模型&#xff0c;你可能会…...

Vue项目里给天地图加个‘框’:限制缩放与拖拽区域的完整配置流程(附避坑点)

Vue项目实战&#xff1a;天地图交互边界精准控制与工程化实践 在园区导航、景区导览等业务场景中&#xff0c;地图交互边界的精确控制直接影响用户体验。上周接手一个智慧园区项目时&#xff0c;产品经理指着地图上可以无限拖拽的空白区域问我&#xff1a;"能不能让地图像…...

GLM-4.7-Flash多场景落地:保险条款解读、理赔话术生成与客户异议应答

GLM-4.7-Flash多场景落地&#xff1a;保险条款解读、理赔话术生成与客户异议应答 保险行业每天都要处理海量的文本工作&#xff1a;厚厚的保单条款需要解读&#xff0c;复杂的理赔申请需要沟通&#xff0c;客户的各种疑问需要专业、及时地回应。这些工作不仅繁琐&#xff0c;而…...

04.如何在Allegro X中导入机械结构尺寸图纸和注意事项 I Allegro X PCB设计小诀窍系列

大家好&#xff01;在进行PCB设计时&#xff0c;我们经常需要根据机械结构工程师提供的**DXF图纸**来确定板框形状、定位孔位置、元器件高度限制区域等关键信息。如果手动在PCB中重新绘制这些几何图形&#xff0c;不仅耗时&#xff0c;还容易与结构图纸产生偏差——哪怕零点几毫…...

all-MiniLM-L6-v2部署教程:Ollama中自定义embedding模型名称与API端点配置

all-MiniLM-L6-v2部署教程&#xff1a;Ollama中自定义embedding模型名称与API端点配置 想在你的本地环境中快速部署一个轻量、高效的文本向量化服务吗&#xff1f;all-MiniLM-L6-v2是一个绝佳的选择。这个模型虽然小巧&#xff0c;但在语义理解任务上表现不俗&#xff0c;特别…...

Charticulator:重构数据可视化创作范式的技术革命

Charticulator&#xff1a;重构数据可视化创作范式的技术革命 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 数据可视化正面临前所未有的创作困境——当业务需求…...

别再踩坑了!UniApp集成支付宝支付,从创建应用到上线审核的保姆级避坑指南

UniApp集成支付宝支付全流程避坑指南&#xff1a;从密钥配置到审核上线的实战经验 第一次在UniApp项目中集成支付宝支付时&#xff0c;我花了整整三天时间反复调试——不是因为代码逻辑复杂&#xff0c;而是那些看似简单的配置环节处处是坑。本文将分享我从七个关键环节总结的…...

Figma进阶协作与组件化实战

要系统掌握 Figma 的进阶功能&#xff0c;需要从协作、组件化、交互、变量化和设计系统等多个维度深入学习。这些功能共同构成了高效、专业设计工作流的核心。以下将结合具体操作和案例&#xff0c;详细解析关键进阶功能的使用方法。 一、高效协作与文件管理 Figma 的核心优势…...