在javascript中使用伪::before元素选择img src

Question

我正在尝试通过 document.querySelector 选择 img src ，它仅适用于没有 ::before 伪元素的元素：

document.getElementById("div1").addEventListener("click",function(ev) {
        var dj = document.querySelector("#div1 > span.selected > span.swatches_image-container > img").src;
        console.log(dj);
    });

假设有两个包含 img 的 span 元素。它只需要这些没有 ::before 元素的元素，当 onclick 这个跨度时动态附加（厚符号覆盖图像）

<div id="div1" class="tawcvs-swatches oss-" data-attribute_name="div1">
    <span class="swatch swatch-image swatch-white selected" data-value="white">
        <span class="swatches_image-container">
            ::before
            <img src="white.jpg" alt="white">
        </span>white
    </span>
    <span class="swatch swatch-image swatch-black" data-value="black">
        <span class="swatches_image-container">
            <img src="black.jpg" alt="black">
        </span>black
    </span>
</div>

在这种情况下，我想获取所选白色元素的 src，但 javascript 控制台返回第二个黑色 src 图像。这是因为 ::before 元素吗？还有其他方法获取图像的src吗？我可以为这些图像附加 id 或类，但我需要获取这些图像的 src，该图像位于所选类的范围内。

这是一个工作演示：

document.getElementById("div1").addEventListener("click", function(ev) {
  var dj = document.querySelector("#div1 > span.selected > span.swatches_image-container > img").src;
  console.log(dj);
});

[data-value="white"] > .swatches_image-container::before{
  content: "bogus";
}

<div id="div1" class="tawcvs-swatches oss-" data-attribute_name="div1">
  <span class="swatch swatch-image swatch-white selected" data-value="white">
        <span class="swatches_image-container">
            ::before
            <img src="white.jpg" alt="white">
        </span>white
  </span>
  <span class="swatch swatch-image swatch-black" data-value="black">
        <span class="swatches_image-container">
            <img src="black.jpg" alt="black">
        </span>black
  </span>
</div>

Answer 1

如果你不知道

querySelector

获取DOM中最上面的元素，你必须使用事件参数，如果你正在制作样本，你应该为每个样本范围添加事件监听器

document.querySelectorAll(".swatch").forEach((swatch) => {
  swatch.onclick = (e) => {
    console.log(e.currentTarget.querySelector("img"))
    // Do whatever you need when you click the swatch e.g. style the outline
  }
})

[data-value="white"] > .swatches_image-container::before{
  content: "bogus";
}
[data-value="black"] > .swatches_image-container::before{
  content: "foo";
}

<div id="div1" class="tawcvs-swatches oss-" data-attribute_name="div1">
  <span class="swatch swatch-image swatch-white selected" data-value="white">
        <span class="swatches_image-container">
            <img src="white.jpg" alt="white">
        </span>white
  </span>
  <span class="swatch swatch-image swatch-black" data-value="black">
        <span class="swatches_image-container">
            <img src="black.jpg" alt="black">
        </span>black
  </span>
</div>