使用JavaScript向url添加参数

我想将url参数添加到我的img src中，可以使用getElementById来完成，但不能使用getElementsByClassName。我更喜欢使用getElementsByClassName，因为它对我的目的更有意义。以下是我正在使用的代码：

<img id="parameter" src="http://url-to-image.com/image.jpg" style="width: 100%">

<script>
var image = document.getElementById("parameter");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + "?w=" + viewportWidth + "&h=" + viewportHeight + "&dpr=" + dpr + "&fit=crop");
</script>

上面的代码工作得很好，但是使用

<img class="parameter" src="http://url-to-image.com/image.jpg" style="width: 100%">

<script>
var image = document.getElementsByClassName("parameter");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + "?w=" + viewportWidth + "&h=" + viewportHeight + "&dpr=" + dpr + "&fit=crop");
</script>

---

不向img src添加任何内容。url参数应添加到具有class参数的所有图像中。如果有人能在这方面帮助我，我将非常高兴。

如果只有一个元素具有class name参数，请将其与索引0一起使用

var image = document.getElementsByClassName("parameter")[0];

Document接口的方法返回所有子元素的类似数组的对象，这些子元素具有所有给定的类名

getElementsByClassName返回一个数组，因此您需要在所有元素上循环，或者如果您确定只有一个元素，则可以选择第一个元素，并在图像后面加[0]

如果要将其应用于所有图像，可以对其进行循环。在下面的示例中，我使用querySelectorAll来选择class.parameter

常量视口宽度='100px'； 常量视口高度='100px'； 常数dpr=2； const images=document.queryselectoral.parameter； images.forEach image=>{ const imageSrc=image.getAttributesrc； image.setAttributesrc，imageSrc+？w=+视口宽度+&h=+视口高度+&dpr=+dpr+&fit=裁剪； } ; 正如其他人所说，返回列表总是。 我想你可以看看这个方法

var image = document.querySelector(".parameter");

然后，您不需要查看列表中的第一项

演出

---

从性能角度来看，getElementByClass会更快

getElementsByClassName始终返回元素列表，即使类中只有一个元素。您必须分别对列表中的每个元素进行操作。getElementById仅返回单个元素，但所有getElementsBy…方法都返回一个节点列表，您必须循环访问该列表中的各个元素。感谢您的所有帖子，这才有意义。url参数将被添加到带有class参数的所有图像中，我已将该信息添加到我的上述问题中。感谢您的支持！参数应该添加到所有带有参数类的图像中。谢谢，也很好！这个最适合我的目的。谢谢大家的帮助和支持！