Cannot read properties of null (reading 'querySelector')
时间: 2024-01-30 21:12:19 浏览: 139
javascript之querySelector和querySelectorAll使用介绍
报错"Cannot read properties of null (reading 'querySelector')"通常是因为在使用`querySelector`方法时,没有找到对应的元素,导致返回值为`null`,而`null`无法读取属性。这个错误通常发生在以下两种情况下:
1. 当页面中不存在对应的元素时,使用`querySelector`方法无法找到元素,返回值为`null`。在对返回值进行属性读取时,就会出现报错。
2. 当页面中存在对应的元素,但是在使用`querySelector`方法之前,DOM还没有加载完成,此时也会返回`null`。
为了避免这个错误,可以在使用`querySelector`方法之前,确保DOM已经加载完成,可以使用以下两种方法:
1. 将脚本放在`<body>`标签的末尾,确保DOM已经加载完成。
2. 使用`DOMContentLoaded`事件,在事件处理程序中执行脚本,确保DOM已经加载完成。
以下是两种解决方法的示例代码:
1. 将脚本放在`<body>`标签的末尾:
```html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="aaa"></div>
<script>
const AAA = document.querySelector('.aaa');
if (AAA) {
AAA.addEventListener('click', function () {
this.style.backgroundColor = 'red';
console.log(AAA === this);
});
}
</script>
</body>
</html>
```
2. 使用`DOMContentLoaded`事件:
```html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="aaa"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const AAA = document.querySelector('.aaa');
if (AAA) {
AAA.addEventListener('click', function () {
this.style.backgroundColor = 'red';
console.log(AAA === this);
});
}
});
</script>
</body>
</html>
```
阅读全文