Javascript - 无法访问 HTML 项目？

Question

我正试图让一个元素在我的网站上可以点击。我正在检索使用GetElementsByClassName((可点击的3个项目，并试图使用.item((语法操作该对象。将项分配给变量时，即使可以在控制台中看到该项，它的值也为NULL。该集合显示在控制台中，但我无法访问其项目。代码包含在下面。该页面可在https://clearrock959.com。如何访问这些项目？

function replace() {
let list = document.getElementsByClassName('cmsmasters_gallery_item cmsmasters_caption shortcode_animated');
var x = list.item(1);
console.log(list);
console.log(x);
}  

Answer 1

LI一开始没有shortcode_animated类，所以除非您稍后添加它们，否则您需要

console.log(document.getElementsByClassName("cmsmasters_gallery_item cmsmasters_caption")[0])

<ul class="cmsmasters_gallery cmsmasters_3 cmsmasters_more_items_loader">
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>EQUIPMENT</figcaption>
</figure>
</li>
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>SERVICE</figcaption>
</figure>
</li>
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>PREVENTATIVE MAINTENANCE</figcaption>
</figure>
</li>
</ul>

或者更安全的

console.log(document.querySelectorAll(".cmsmasters_gallery_item.cmsmasters_caption")[0])

<ul class="cmsmasters_gallery cmsmasters_3 cmsmasters_more_items_loader">
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-Service-1-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>EQUIPMENT</figcaption>
</figure>
</li>
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-preventative-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>SERVICE</figcaption>
</figure>
</li>
<li class="cmsmasters_gallery_item cmsmasters_caption">
<figure><img width="600" height="446" src="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1.jpg" class="attachment-full size-full" alt="" srcset="https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1.jpg 600w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1-300x223.jpg 300w, https://clearrock959.com/wp-content/uploads/2020/02/AppleFitness_Hotlinks-equipment-1-580x431.jpg 580w"
sizes="(max-width: 600px) 100vw, 600px" />
<figcaption>PREVENTATIVE MAINTENANCE</figcaption>
</figure>
</li>
</ul>