如何选择尚未在 HTML DOM 中加载的元素

Question

我试图为一些图标(超过1400+ png)创建一个工具提示，需要时间使用JavaScript加载到DOM中。问题是我的代码需要选择图标的所有父元素，然后将它们转换为数组，然后进行样式和定位，但由于整个事情需要时间来加载我的代码，最终选择什么也没有返回一个空数组。我试着使用setInterval()，它的工作，但工具提示，然后需要更多的时间来显示，它变得非常慢。我累了加载事件，但他们也不工作…任何解决这个问题的方法都是值得赞赏的…

let setUpToolTip = () => {
let tooltip = " ";
tooltipEmoji = document.querySelector('.Emoji-tooltip')
toolTipElements = document.querySelectorAll('.Emoji')
console.log(toolTipElements)
const tooltipElemArray = Array.from(toolTipElements)
let timer;
let displayTooltip = (e, step) => {
tooltip = step
tooltipEmoji.innerHTML = tooltip
tooltipEmoji.style.top = e.pageY + "px"
tooltipEmoji.style.left = e.pageX + "px"
fadeIN(tooltipEmoji)
}
let fadeOut = function(e) {
let op = 1;
if (!timer) {
timer = setInterval(() => {
if (op <= 0.1) {
clearInterval(timer);
timer = null
e.style.opacity = 0;
e.style.display = "none";
}
e.style.opacity = op;
op -= op * 0.1
}, 10)
}
}
let fadeIN = function(e) {
let op = 0.1;
e.style.display = "block"
var timer = setInterval(() => {
if (op >= 1) {
clearInterval(timer);
}
e.style.opacity = op;
op += op * 0.1
}, 10)
}
tooltipElemArray.forEach((e) => {
const step = e.dataset.tooltip
let timeout;
e.addEventListener('mouseenter', (e) => {
timeout = setTimeout(() => {
displayTooltip(e, step)
}, 400)
});
e.addEventListener("mouseleave", e => {
clearTimeout(timeout)
fadeOut(tooltipEmoji)
})
})
}

setUpToolTip();

Answer 1

window.addEventListener('DOMContentLoaded', setUpToolTip, false);

尝试在加载DOM后设置工具提示