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

错误展示

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

源代码:

html 复制代码
<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> 内部的某个元素!

修改后代码如下:

javascript 复制代码
const active = document.querySelector('.slider-indicator li.active')
相关推荐
ai小鬼头3 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
小赖同学啊5 分钟前
物联网数据安全区块链服务
开发语言·python·区块链
shimly12345612 分钟前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
IT_102438 分钟前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
new_zhou1 小时前
Windows qt打包编译好的程序
开发语言·windows·qt·打包程序
ye901 小时前
银河麒麟V10服务器版 + openGuass + JDK +Tomcat
java·开发语言·tomcat