Javascript 为什么这段代码使用querySelector而不是getElementByClassName？

我正在搜索一种使用JavaScript上传、预览和图像的方法，发现了以下帖子：。 现在，我是一名JavaScript初学者，我想知道为什么我试图更改行

document.querySelector（'img[class='preview']）

到

“document.getElementsByClass（'preview'）”

它不起作用

由此：

function filePreview() {
  var preview = document.querySelector('img[class="preview"]');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.onloadend = function(){
    preview.src = reader.result;
  }

  if(file){
    reader.readAsDataURL(file);
  }else{
    preview.src = "";
  }
}

对此

function filePreview() {
  var preview = document.getElementsByClassName("preview");
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.onloadend = function(){
    preview.src = reader.result;
  }

  if(file){
    reader.readAsDataURL(file);
  }else{
    preview.src = "";
  }
}

HTML

我试图通过将输入：文件给出的图像设置为所有三个图像源来进行3次预览（大、中、小）

它应该是：

document.getElementByClassName("preview");

这将始终返回一个对象数组，因此，如果只有一个DomeElement具有“preview”类，则需要：

var preview = document.getElementByClassName("preview")[0];

您可以在此处阅读有关此方法的更多信息：

---

它应该是复数，

getElementsByClassName

在

document.getElementByClassName（“预览”）中

请注意@j08691 comment中

getElement

s

ByClassName

中的

s

仍然存在HTML集合问题，….我在src reader行和else语句中添加了预览[0][1][2]

var preview = document.getElementByClassName("preview")[0];