Javascript 为什么document.QuerySelector在此上下文中返回空数组？

我有以下一组HTML元素

页面加载时不显示带有类选项的无序列表：

我想在单击元素时显示它。为此，我已：

我不知道为什么，bit console.logselectBox返回一个空数组

我怎样才能解决这个问题

/*选择框*/ 函数selectBoxToggle{ 让selectBox=document.querySelectorAll'.selectBox'； console.logselectBox； 选择Box.forEachfunctionitem{ 让options=item.querySelectorAll.options'； item.addEventListenerclick，options.style.display='block'； 控制台。登录选项； }; } //文件加载时 document.AddEventListenerDomainContentLoaded，函数{ 选择BoxToggle； }; .选择框{ 位置：相对位置； } .选择框.插入符号{ 位置：绝对位置； 右：1px； 最高：50%； 颜色：999； 转化：translateY-50%； } .选择框。选择值{ 高度：33像素； 线高：32px； 边框底部：1px实心ccc； } 。选择框。选项{ 显示：无； 位置：绝对位置； 最小宽度：100%； 背景：fff； z指数：99； 左：0； 顶部：33px； 页边顶部：1px； } 项目1 项目1 项目2 项目3 向下箭头

---

您可能希望切换一个类

/*选择框*/ 常量selectBoxToggle==>{ document.querySelector'.select box'.addEventListenerclick，函数{//现在您可以使用此 此.querySelector'.options'.classList.togglehide }; } //文件加载时 window.addEventListenerload，选择BoxToggle； .选择框{ 位置：相对位置； } .选择框.插入符号{ 位置：绝对位置； 右：1px； 最高：50%； 颜色：999； 转化：translateY-50%； } .选择框。选择值{ 高度：33像素； 线高：32px； 边框底部：1px实心ccc； } 。选择框。选项{ 位置：绝对位置； 最小宽度：100%； 背景：fff； z指数：99； 左：0； 顶部：33px； 页边顶部：1px； } .hide{显示：无} 项目 项目1 项目2 项目3 向下箭头

---

您是否尝试使用li而不是选项？

代替此选项。queryselectoral.options'；使用item.querySelectorAll.options'；如果使用，像这样的问题将抛出错误。但问题不在于.options选择器。HTML真的是最初出现在页面上而不是动态添加的吗？@GuyIncognito它不是动态添加的。然后问题是你没有显示的其他地方，因为只要运行代码段，您就可以看到.select框选择器运行的代码是正确的。代码是Svelte项目的一部分这一事实可能是这个奇怪问题的原因。啊，不知道Svelte