Javascript QuerySelector全部不工作

我完全是javascript和Java的初学者 我正试图用这两张照片制作一个模态图像。 使用querySelectorAll选择类时遇到问题。 如果我把querySelectorAll（'.pics1）[0]放进去，它就会工作

但它不适用于querySelectorAll（“.pics”）

使用document.getElementsByClassName会更好吗

var modal=document.getElementById（'myModal'）；
var image=document.querySelectorAll（'.pics'）；
var modalpic=document.getElementById（'img01'）；
image.addEventListener（'click'，function（）{
modal.style.display=“块”；
modalpic.src=this.src；
});
var close=document.getElementById（'close'）；
close.addEventListener（'click'，function（））{
modal.stlye.display=“无”；
});
.modal{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
}
莫达利梅先生{
保证金：0自动；
显示：块；
宽度：95%；
对齐：居中；
}
.图片{
光标：指针；
宽度：20%；
显示：块；
过渡：0.4s；
边界半径：5px；
}
.图片：悬停{
不透明度：0.7；
}
#接近{
位置：绝对位置；
顶部：15px；
右：10px；
颜色：金色；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
光标：指针；
}
#关闭：悬停{
不透明度：0.7；
}

&时代；
queryselectoral（）
返回一个节点列表…从某种意义上说，它类似于一个数组，是一个项的集合。这就是为什么添加
[0]
（或
[1]
等）会为您提供单个元素。相反，
querySelector（）
只返回一个项目。检查MDN（Mozilla开发者网络）文档中的和

如果您试图获取单个元素，并且将
querySelector
用于标识多个元素的类（例如
class=“pics”
），则
querySelector将只返回第一个元素。因此，如果您真的想使用这样的类，最好使用
querySelectorAll（'pics'）[0]
等。
querySelector
更容易与id一起使用，而不是类，例如
querySelector（'picA'）
与
querySelector（'picB'）
如果您用
id=“picA”标识它们
和
id=“picB”

您询问是否应该使用
document.getElementsByClassName
。我想这取决于你。但是，我发现上述两种方法（
querySelector
和
querySelectorAll
）非常强大，非常有用，因为您可以以多种方式使用它们，例如使用类、id、属性，通过所有这些的组合…比仅限于一个类名更强大。
如果要单击多个按钮，请将按钮放置在另一个元素中，并将eventListener添加到该元素中。当触发click事件时，它不仅会在包装按钮的元素（
.frame
）上触发，还会在您单击的按钮上触发。要获取您单击的实际按钮，请使用属性


var modal=document.getElementById（'myModal'）；
var frame=document.getElementsByClassName（'frame'）[0]；
var modalpic=document.getElementById（'img01'）；
frame.addEventListener（'click'，函数（e）{
var=e.target；
如果（clicked.className==='pics'）{
modal.style.display=“块”；
modalpic.src=clicked.src；
}否则{
返回false；
}
});
.modal{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
}
莫达利梅先生{
保证金：0自动；
显示：块；
宽度：95%；
}
.图片{
光标：指针；
显示：块；
;
宽度：20%；
过渡：0.4s；
边界半径：5px；
}
.图片：悬停{
不透明度：0.7；
}
#接近{
位置：绝对位置；
顶部：15px；
右：10px；
颜色：金色；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
光标：指针；
}
#关闭：悬停{
不透明度：0.7；
}
.框架{
边框：3件纯蓝；
}

&时代；
请查看此代码：

<div id='div1'> 
  Content.. 
  <!-- content.. -->
  <br>
  <a id='close_btn'>click to Close</a>
</div>

<script type="text/javascript">
 document.getElementById('close_btn').addEventListener('click', function(){
               document.getElementById("div1").style.visibility = "hidden";
            });
</script>


内容。。


点击关闭
document.getElementById（'close_btn'）。addEventListener（'click'，function（）{
document.getElementById（“div1”）.style.visibility=“hidden”；
});
因为它是一个HTML集合，所以它不是单个元素。QuerySelector all返回一个HTML集合——如果要为每个图像添加侦听器，则必须迭代整个集合。它按预期工作。如果我将querySelectorAll（'.pics1）[0]？？或者如果我把querySelectorAll（'.pics）[0]；