Question

我已经使用JS为所有带有图像类的元素添加了id。图像现在具有ID，例如。 image--1，image--2,等

如果我想使用var el = document.getElementById('image--1');通过ID获得元素，那么我将得到null。

如何在纯JS中获取当前的DOM？

Answer 1

您可以使用setAttribute()方法通过vanillajs可靠地设置图像元素的ID。

这里还要记住的一点是，在执行JavaScript之前，必须先定义图像元素并将其显示在DOM中。

考虑到这两点，请考虑以下代码-您可以按照以下方式做一些事情来实现自己的目标；

<html>
<head>
</head>
<body>

<!-- DEFINE BEFORE SCRIPT -->
<img class="img" src="/yourimage0.jpg" />
<img class="img" src="/yourimage1.jpg" />

<!-- DEFINE SCRIPT AFTER IMAGE ELEMENTS -->    
<script>

    var id = 1;

    // Use the querySelectorAll method to select collection of your
    // image elements
    for(var img of document.querySelectorAll(".img")) {

        // Set the id attribute in this way, using the setAttribute method
        img.setAttribute("id", "image--" + id);
        id++;
    }

    // You can now access the element by id with the following
    var el = document.getElementById('image--1');

</script>

</body>
</html>

Answer 2

这有效。请说明您的代码不同之处

document.querySelectorAll(".img").forEach(function(img,i) {
  img.id="image--"+i; 
})

document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";

<img class="img" src="https://via.placeholder.com/350x150" />

<img class="img" src="https://via.placeholder.com/350x150" />

<img class="img" src="https://via.placeholder.com/350x150" />

动态地：

// create the images:
var container = document.getElementById("container");
for (var i=0;i<3;i++) {
  var img = document.createElement("img");
  img.src="https://via.placeholder.com/350x150";
  img.classList.add("img");
  container.appendChild(img);
}

document.querySelectorAll(".img").forEach(function(img,i) {
  img.id="image--"+i; // makes more sense to do that in the creation part too
})

document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";

<div id="container"></div>

Answer 3

我猜您正在使用Vue.js或React.js之类的Web框架，这是由于虚拟DOM所致，这意味着您无法在将这些元素安装到真实DOM之前获得它们。如果是这样，则应该在componentDidMount函数中获取这些元素。

我在以前的JS中添加此ID时如何获取document.getElementById

3 个答案: