勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptのDOMContentLoadedとは?

  JavaScript

jQuery等を用いない素のJSで書かれたプログラムを触る機会があり、そのソースコードの冒頭に以下記述があった。

window.addEventListener('DOMContentLoaded', () => {});

これ何? となったので調べた結果をメモ。

 

DOMContentLoadedイベント

HTMLページの読み込みが完了し、HTMLの解析及びDOMツリーの構築が完了した時点で発生するイベントらしい。詳細は以下の通り。

https://www.javadrive.jp/javascript/event/index15.html

 

jQueryでは

jQueryだと最初に以下のように記述し、「$()」の部分はHTMLが読み終わった後に発火させるみたいな意味と記憶していたが、これはそのまんまDOMContentLoadedと同じことらしい。

$(funciton(){
    //ここに色々記述
});

 

 - JavaScript

  関連記事

バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法

ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複 ...

JavaScriptで数値のカンマ区切り化とカンマ区切りの解除

JavaScriptで数値を3桁ごとにカンマ区切り化したい。また、それとは逆にカ ...

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...

バニラJavaScriptでXML形式データの取り扱いとJSON形式への変換方法

JavaScriptで外部APIにリクエストし、レスポンスのXML形式データを取 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...