使用document.querySelectorAll()无法选中select下option内的span元素

核心原因：浏览器对<option>内部HTML的特殊处理 #

绝大多数浏览器在解析<select>下的<option>元素时，不会将其内部的HTML标签（比如你的<span>）解析为真实的DOM节点。浏览器只会提取<option>中的文本内容进行渲染，直接忽略掉嵌套的HTML标签结构。这就导致你的document.querySelectorAll('.amount-currency-span span')找不到任何元素——因为这些<span>根本没被加入到DOM树里。

你可以自己验证这一点：执行下面的代码看看实际的DOM结构：

console.log(document.querySelector('#movie option').innerHTML);

你会发现浏览器可能已经自动剥离了<span>标签，只剩下纯文本内容。

可行的替代方案 #

如果需要实现“区分选项内的特定文本”或者“给部分文本加样式”的需求，可以试试这些方法：

• 利用data属性存储数据：把金额信息放在<option>的data-*属性里，比如：

  <option value="10" class="amount-currency-span" data-amount="10USD">Avengers: Endgame (10USD)</option>
  

  之后通过JS读取dataset.amount就能拿到对应值，完全不需要依赖嵌套标签。
• 自定义模拟select组件：如果需要复杂的样式或DOM结构，可以用<div>等元素手动模拟下拉选择器，这样就能完全控制内部的DOM节点，想加多少<span>都没问题。
• 有限的CSS样式控制：部分浏览器支持给<option>设置基础样式（比如颜色、字体），如果只是简单的样式需求，可以直接给<option>加CSS类，不用嵌套标签。

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