我是javascript初学者，当一个类悬停以影响另一个类时，我会在后面创建此代码以产生悬停效果。
但我的问题仍然不在这里，我的问题是当我调试我的程序时，我在调试器中有这样的错误消息：
未捕获引用错误：文档未定义
我在stackoverflow上看到了很多关于这个问题的问题，但我不理解awnsers，例如，什么对安装JSDom有用？等等。
所以我希望我不是一个愚蠢的不理解，感谢支持我的问题。
const graphic = document.querySelector('.block1');
const audio = document.querySelector('.block3');
const zoomPro = document.querySelector('.zoom');
const zoomPerso = document.querySelector('.zoom2');
zoomPro.addEventListener('mouseenter', () => {
graphic.classList.add('hoverGraphic');
audio.classList.add('unhoverAudio');
})
zoomPerso.addEventListener('mouseenter', () => {
graphic.classList.add('unhoverGraphic');
audio.classList.add('hoverAudio');
})
zoomPro.addEventListener('mouseleave', () => {
graphic.classList.remove('hoverGraphic');
audio.classList.remove('unhoverAudio');
})
zoomPerso.addEventListener('mouseleave', () => {
graphic.classList.remove('unhoverGraphic');
audio.classList.remove('hoverAudio');
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="StyleM.css">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="Animation.js">
<Title>Zeryko - Portfolio</Title>
</head>
<body>
<div class="mainblock">
<!-- BOITE 1 -->
<div class = "block1">
<header>
<a class = "zoom" href="PartieVisuelle.html">Professionnel</a>
</header>
</div>
<!-- BOITE 3 -->
<div class = "block3">
<footer>
<a class = "zoom2" href="PartieMusicale.html">Personnel</a>
</footer>
</div>
</div>
<!-- BOITE 2 -->
<div class="BigBlock">
<div class = "block2">
<div class="Zeryko">Antoine DOUBLET</div>
<div class="phrase">Developper & Artist</div>
</div>
</div>
</body>
</html>
您的JavaScript旨在为HTML文档添加事件侦听器。只有在HTML文档中运行它(使用<script>元素(，以便在加载HTML文档时由web浏览器中的JS引擎执行它才有意义。
您的错误消息，以及提到的JSDOM，强烈建议您尝试使用Node.JS运行JS。这没有任何意义。
忘记Node.js吧。在HTML中添加一个<script>元素，其中包含指向js URL的src属性。使用defer确保页面已完成解析，以便使用querySelector搜索的HTML元素及时存在。
<script src="....../yourjs.js" defer></script>