-1

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

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

如何在纯 JS 中获取当前 DOM?

4

3 回答 3

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>
于 2018-09-03T09:24:14.313 回答
0

我猜你正在使用像 Vue.js 或 React.js 这样的 web 框架,那么这是因为虚拟 DOM,这意味着在将这些元素挂载到真实 DOM 之前你无法获取这些元素。如果是这样,您应该在 componentDidMount 函数中获取这些元素。

于 2018-09-03T09:49:56.550 回答
0

这行得通。请解释您的代码的不同之处

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>

于 2018-09-03T09:26:16.050 回答