为什么此代码适用于 querySelector 而不是 getElementByClassName？ [复制]

Question

我正在寻找一种使用 JavaScript 上传和预览图像的方法，并找到了这篇文章：make simple image preview。 现在，我是一名初级 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

  <div class="uploadimg">
    <input type="file" onchange="filePreview()"><br>
    <img src="" height="300" class="preview" alt="Image preview"><br>
    <img src="" height="200" class="preview" alt="2"><br>
    <img src="" height="150" class="preview" alt="3">
  </div>

我要做的是通过尝试将 input:file 给定的图像设置为所有三个图像源来进行 3 个预览（大中和小）

Answer 1

应该是：

document.getElementByClassName("preview");

这将始终返回一个对象数组，因此，如果您只有一个带有“预览”类的 DOMElement，您需要：

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

您可以在此处阅读有关此方法的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName