我已经使用 JS 为所有具有一类图像的元素添加了一个 id。图像现在有 id,例如。等image--1
_image--2,
如果我想通过 ID 获取元素,var el = document.getElementById('image--1');
那么我会得到 null。
如何在纯 JS 中获取当前 DOM?
我已经使用 JS 为所有具有一类图像的元素添加了一个 id。图像现在有 id,例如。等image--1
_image--2,
如果我想通过 ID 获取元素,var el = document.getElementById('image--1');
那么我会得到 null。
如何在纯 JS 中获取当前 DOM?
您可以使用该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>
我猜你正在使用像 Vue.js 或 React.js 这样的 web 框架,那么这是因为虚拟 DOM,这意味着在将这些元素挂载到真实 DOM 之前你无法获取这些元素。如果是这样,您应该在 componentDidMount 函数中获取这些元素。
这行得通。请解释您的代码的不同之处
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>