创建一个 ready();功能

为 DOMContentLoaded 事件创建一个就绪函数可能是个好主意，我们可以使用包含事件触发时要执行的代码的回调函数调用该函数，以下是如何完成的示例：

function ready(callback) {
  if (typeof callback !== 'function') {
    throw new Error('The callback parameter must be a function!'); 
  }
   window.addEventListener('DOMContentLoaded', callback);
}

为了使用此函数，我们可以将其与匿名箭头函数一起使用：

let message = 'The DOM is fully loaded.';
ready(() => {
  console.log(message);
});

或者使用传统的 function 关键字：

ready(function() {
  console.log(message);
});

DOMContentLoaded 事件仅在 DOM 完全加载后触发，无需等待图像、样式表和子frame；如果我们还需要完成加载资产，则应考虑使用 load 事件。

我们可以在 Window 界面上侦听此事件。

我们可以设置一个等待此事件的事件侦听器，以确保加载脚本依赖项并避免未定义的错误。
当我们设置事件侦听器时，我们将需要使用在事件触发后执行的回调函数：

window.addEventListener('DOMContentLoaded', function() {
    document.getElementById("id_of_element").innerHTML = '<p>DOM fully loaded.</p>';
});

如果我们只想更新元素的文本，则可以使用innerText 而不是innerHTML。

如果需要捕获事件，请将其作为函数参数传递：

window.addEventListener('DOMContentLoaded', function(event) {
  console.log(event);
});

如果我们在依赖项上遇到未定义的错误，例如 jQuery 或者 $，那么在我们尝试使用此类库之前设置事件侦听器以确保 DOM 已加载有时可能会有所帮助。