为什么这段代码可以在querySelector上运行，而不能在getElementByClassName上运行？
为什么这段代码可以在querySelector上运行，而不能在getElementByClassName上运行？
提问于 2018-06-19 03:55:28
我正在寻找一种用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次预览(Big、Medium和Small
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-19 05:33:23
它应该是：
document.getElementByClassName("preview");这将总是返回一个对象数组，因此，如果您只有一个带有“DOMElement”类的预览，您将需要：
var preview = document.getElementByClassName("preview")[0];您可以在此处阅读有关此方法的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50916607
复制相关文章
相似问题