选择第二个 div 并选择其中的一个元素

Question

我希望能够在 (bpa-front--pm-body-items) 的嵌套 div 中选择第二个 div (bpa-front-module--pm-body__item)，然后选择第二个 div 的 svg并隐藏 svg。

如果我添加 .style.display='none';在 [1] 之后它隐藏了整个 div，因此 JavaScript 的第一行工作正常。

对于第二行代码，在控制台中我收到错误“Uncaught TypeError：无法设置未定义的属性（设置'显示'）”

然后我想通过 url 添加我自己的图像来替换 svg，可能是通过在文本之前添加内容（后面的“p”标签）？

<div class="bpa-front--pm-body-items">
  <div class="bpa-front-module--pm-body__item __bpa-is-selected">
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52C15.59,9.23,15.11,10,14.22,10 C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z"></path>
      </g>
    </svg>
    <p>Pay on the Day</p>
    <div class="bpa-front-si-card--checkmark-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"></path>
      </svg>
    </div>
  </div>
  <div class="bpa-front-module--pm-body__item"> <!-- SELECT THIS DIV -->
    <!-- SELECT & HIDE SVG  and replace with an image URL? --><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52C15.59,9.23,15.11,10,14.22,10 C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z"></path>
      </g>
    </svg>
    <p>Debit/Credit</p>
  </div>
</div>

<script>
setTimeout(function(){
  
    var seconddiv = document.querySelectorAll(".bpa-front-module--pm-body__item")[1];
    var changediv = seconddiv.getElementsByClassName(".bpa-front-pm-pay-local-icon").style.display='none';

      
      
}, 5000 );
  
</script>

Answer 1

您的线路：

    var changediv = seconddiv.getElementsByClassName(".bpa-front-pm-pay-local-icon").style.display='none';

有错误，可以去掉‘.’在 bpa-front-pm-pay-local-icon 之前，因为 getElementsByClassName 已经定位类，因此您可以删除点类选择器。