JavaScript中如何选择带::before伪元素的img的src属性

1. 是不是::before伪元素导致的问题？ #

不是。::before是CSS生成的伪元素，不属于真实DOM结构，浏览器的DOM API（包括document.querySelector）不会识别到它，完全不会干扰元素选择逻辑。

2. 为什么会返回未选中元素的img src？ #

大概率是点击事件触发时，selected类还没完成切换（比如页面处理选中状态的逻辑执行顺序在你的点击事件之后），导致querySelector拿到的还是之前选中的元素；也可能是页面中存在多个匹配span.selected的元素（从你的结构看应该是前者）。

3. 解决方法 #

方法一：通过事件对象定位点击目标（最可靠） #

利用ev.target找到点击元素所属的swatch容器，手动切换选中状态后再获取img的src：

document.getElementById("div1").addEventListener("click", function(ev) {
  // 找到点击元素对应的swatch容器
  const clickedSwatch = ev.target.closest('.swatch');
  if (!clickedSwatch) return;

  // 移除所有swatch的selected类，给当前点击的添加
  document.querySelectorAll('#div1 .swatch').forEach(swatch => swatch.classList.remove('selected'));
  clickedSwatch.classList.add('selected');

  // 获取当前选中swatch内的img src
  const targetImg = clickedSwatch.querySelector('.swatches_image_container img');
  if (targetImg) {
    console.log(targetImg.src);
  }
});

方法二：确保获取元素的时机在选中状态更新后 #

如果页面有其他逻辑负责切换selected类，把你的获取代码放在该逻辑之后，或者用异步方式延迟获取（仅作应急方案）：

document.getElementById("div1").addEventListener("click", function() {
  setTimeout(() => {
    const selectedImg = document.querySelector('#div1 > span.selected > span.swatches_image_container > img');
    if (selectedImg) {
      console.log(selectedImg.src);
    }
  }, 0);
});

方法三：给img添加专属类简化选择 #

如果可以给img加自定义class（比如swatch-img），选择器会更简洁：

<!-- 修改后的img标签 -->
<img class="swatch-img" src="white.jpg" alt="white">

document.getElementById("div1").addEventListener("click", function() {
  const selectedImg = document.querySelector('#div1 span.selected .swatch-img');
  console.log(selectedImg?.src);
});

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