如何在JavaScript中等待DOM中的元素加载？

Question

我在获取 DOM 中的元素选择器时遇到问题，我将脚本源放在 HTML 页面的底部，我还尝试将所有代码包装在一个函数中"DOMContentLoaded" 事件，但仍然无法正常工作。此外，它会禁用 jQuery 我在我的项目中使用它。

这就是我获取选择器的方式：

const char = document.querySelectorAll('.text');
const num = document.querySelectorAll('span');

当我尝试在函数中捕获选择器时，它起作用了，因为它等待 DOM 被加载。我想在我的代码中多次使用这两个变量，所以我希望它们全局可用，避免在很多地方重复同一行。

有什么办法可以等待DOM加载完成，然后全局获取元素选择器吗？

Answer 1

全局定义它们并使用 DOMContentLoaded 进行设置

let char;
let num;
window.addEventListener('DOMContentLoaded', function() {
    char = document.querySelectorAll('.text');
    num = document.querySelectorAll('span');
});

document.querySelector("button").addEventListener("click", () => {
  console.log(char);
  console.log(num);
});

<div class="text"><span></span></div>
<div class="text"><span></span></div>

<button>Test</button>

或者制作getter

const elems = {
  domChars: null,
  domNum: null,
  get chars() {
    if (this.domChars === null) {
      this.domChars = document.querySelectorAll('.text');
    }
    return this.domChars;
  },
  get nums() {
    if (this.domNum === null) {
      this.domNum = document.querySelectorAll('span');
    }
    return this.domNum;
  }
};


document.querySelector("button").addEventListener("click", () => {
  console.log(elems.chars);
  console.log(elems.nums);
});

<div class="text"><span></span></div>
<div class="text"><span></span></div>

<button>Test</button>

如何在JavaScript中等待DOM中的元素加载？

How to wait for elements to be loaded in DOM in JavaScript?

javascript

dom

selector

wait