Javascript 为什么querySelector（）即使类确实存在也返回null？

我读了这篇文章，似乎查询选择器找不到类。因此，返回null。 我尝试了此处提供的最后一种解决方案： 控制台没有给出任何错误。然而，什么也没有发生。试图

cosole.log（document.querySelector（'wordImage'）；

不向控制台显示任何消息

.exa头衔{
字体：斜体；
左边距：10px；
颜色：浅灰色；
}
addEventListener（'load'，init）；
常量词汇表=[
{
图像：“https://media.istockphoto.com/photos/red-apple-with-leaf-isolated-on-white-background-picture-id185262648?k=6&m=185262648&s=612x612&w=0&h=u9rMspGGTOkgUSzZ6INtT_Ww4NpGz9zHMGRmIJJjBqQ=",
单词：“苹果”，
例子：“红苹果。”
},
{
图像：“https://upload.wikimedia.org/wikipedia/commons/8/88/Bright_red_tomato_and_cross_section02.jpg",
单词：“西红柿”，
例子：“红番茄。”
}
];
函数init（）{
//DOM变量
const-wordImage=document.querySelector（'word-image'）；
const ex_title=document.querySelector（'ex-title'）；
const ex_-session=document.querySelector（'ex-session'）；
const-wordInput=document.querySelector（'word-input'）；
//从数组中加载第一个对象
展示卡（声乐家）；
//开始匹配单词输入
addEventListener（'input'，matchWords）；
}
//选择并显示随机单词
功能展示卡（词汇表）{
//生成随机数组索引
const randIndex=Math.floor（Math.random（）*vocabularyList.length）；
//输出随机字
wordImage.src=词汇表[randIndex].image；
}
函数匹配词（）{
if（wordInput.value==词汇列表[randIndex].word）{
//ex_title.innerHTML=“p.ej.”；
ex_句子.innerHTML=词汇表[randIndex]。示例；
}
}

querySelector

接受CSS选择器。此代码使用标记选择器：

const wordImage = document.querySelector('word-image');

也就是说，它查找带有标签

word image

的元素，如下所示：

<word-image>...</word-image>

见：

---

我不敢相信我没有注意到这一点。但是在正确选择类之后，它仍然会变为null。

const wordImage = document.querySelector('.word-image');