JavaScript中如何等待DOM元素加载完成后全局获取元素选择器？

全局获取DOM元素的实现方案 #

方案1：全局声明+DOM加载完成后赋值 #

先在全局作用域声明变量，等DOMContentLoaded触发后再给变量赋值，即可全局访问：

// 全局作用域提前声明变量
let char, num;

document.addEventListener('DOMContentLoaded', function() {
  // DOM加载完成后完成赋值
  char = document.querySelectorAll('.text');
  num = document.querySelectorAll('span');
  // 依赖这两个变量的初始化逻辑可在此处调用
  init();
})

// 后续其他全局函数调用时，可加判断避免未赋值时报错
function yourCustomFunc() {
  if (!char || !num) return
  // 正常使用char和num的逻辑
}

如果担心全局变量污染，可挂载到自定义全局命名空间下：

// 全局仅暴露一个自定义命名空间，避免变量冲突
window.MyApp = window.MyApp || {}

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

// 其他位置使用时从命名空间取值即可
console.log(MyApp.char, MyApp.num)

方案2：封装取值函数（适合DOM动态更新场景） #

如果页面存在DOM动态增删的情况，静态赋值的NodeList不会同步更新，可封装全局取值函数，每次调用实时获取最新元素：

window.getGlobalElements = function() {
  return {
    char: document.querySelectorAll('.text'),
    num: document.querySelectorAll('span')
  }
}

// 任意位置调用即可拿到最新元素
const {char, num} = getGlobalElements()

jQuery失效问题排查 #

出现该问题通常是加载顺序或作用域冲突导致，可按以下点排查：

• 确保jQuery的引入script标签在你的自定义脚本之前
• 不要嵌套混用原生DOMContentLoaded和jQuery的$(document).ready()，统一用其中一种即可，避免执行顺序混乱
• 检查是否有自定义变量命名为$覆盖了jQuery别名，如有冲突可调用jQuery.noConflict()释放$控制权，改用jQuery关键字调用相关方法

内容的提问来源于stack exchange，提问作者MaHo