JavaScriptを使用してHTMLまたはDOMを読み込む方法を待つには?

Originally posted here!
操作を行い、DOMの操作を実行しながらアプリケーションをスムーズに実行できるようにするには、DOMまたはHTML要素全体を読み込むまで待つ必要があります.
DOMで聞くことができるロードイベントの2種類があります.

load イベントオンザwindow オブジェクト

DOMContentLoaded イベントオンザdocument オブジェクト

The load イベントでwindow オブジェクト
The load イベントでwindow オブジェクトは、DOMがイメージ、Iframeなどを含むすべてのリソースのように完全にロードされるまで待ちます.
The load イベントは、ページ上のすべてが読み込まれた後にトリガされます.
そのためには、イベントリスナーを追加してload グローバルイベントwindow オブジェクト.

// listen for load event in the window
window.addEventListener("load", function () {
  // do things after the DOM loads fully
  console.log("Everything is loaded");
});

The DOMContentLoaded イベントでdocument オブジェクト
The DOMContentLoaded イベントでdocument オブジェクトはload イベントは、ブラウザがHTMLをロードし、DOMが構築されたときに発生します.これは、画像のようなリソースを待つことはありませんiframeなどをロードします.
そのためには、イベントリスナーを追加してDOMContentLoaded イベントでdocument オブジェクト.

// listen for DOMContentLoaded event in teh document
document.addEventListener("DOMContentLoaded", function () {
  // do things after the DOM loads partially
  console.log("DOM is loaded");
});

お気軽に共有する場合は、この便利な発見😃.