addEventListener()でDOM表示時に発火 | IT技術備忘録-techyankee

あまり使わないaddEventListener()を使いました。まず使い方としては以下の通り。

対象要素.addEventListener(種類, function() {
  
  //ここに処理を記述する
  
}, false);

今回使ったパターンは、下のもの

document.addEventListener("DOMContentLoaded", function() {

});

ちなみにDOMContentLoadedを使うと、Webページが読み込みが完了した時に発動（画像などのリソースは含まない）とのこと。

ちなみにdocument.addaddEventListener()を使うとこんなことができるみたい

<body>
  <p id="sample">Hello World!</p>
 
  <script>
    var id = document.getElementById('sample');
 
    console.log( id );
  </script>
</body>

上の実行結果が下

<p id="sample">Hello World!</p>

DOM要素がそのまま取得できました

さらにdocument.ってなんぞやってことなのですが、「document」オブジェクトを利用すると、Webページを構成しているHTML要素にアクセスできるのだそうな

単体で使うとこんなふうになるそうな

//head要素の中身を出力
console.log( document.head );
 
 
//body要素の中身を出力
console.log( document.body );

詳細は以下のリンクから