为什么此代码适用于 querySelector 而不是 getElementsByClassName？

Question

我正在寻找一种使用 JavaScript 上传和预览图像的方法，并找到了这个 post：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");

并且这将始终是 return 一组对象，因此，如果您只有一个 DOMElement class 为 "preview"，您需要：

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

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

为什么此代码适用于 querySelector 而不是 getElementsByClassName？

Why does this code work with querySelector and not getElementByClassName?

html

javascript

jquery-selectors