为何箭头函数绑定click事件时，回调获取DOM元素返回null？

核心问题：类名拼写不一致 #

你遇到的问题和箭头函数的this无关，本质是HTML元素类名拼写错误：

• HTML中容器div的类名是possibilties（注意：字母i和l之间少了一个s）
• 但第一个回调函数里使用的选择器是.possibilities（正确拼写包含两个s）

这直接导致document.querySelector(".possibilities")找不到对应元素，返回null。

为什么修改后的代码能正常运行？ #

修改后的代码没有依赖类名选择器，而是通过点击事件的上下文this（即被点击的li元素），通过parentNode.parentNode向上遍历DOM树直接拿到目标容器元素，完全避开了类名拼写错误的问题，因此功能正常。

验证修复方法 #

把HTML中的类名修正为possibilities（与JS选择器保持一致）：

<div class="possibilities absolute bottom-100 left-0">
   <ul class="list bg-slate-400 rounded text-white divide-y"> 
   </ul>
</div>

此时即使使用最初的箭头函数版本代码，document.querySelector(".possibilities")也能正常获取到元素，功能可正常运行。

内容的提问来源于stack exchange，提问作者Yannick Durden