No7_ググったこと投稿(5分)_JS系

目次

1.DOMについて
2.Nodeについて
3.addEventListnerについて

1. DOMについて（Document Object Model）

• DOMを利用してwebページとその要素にアクセス

  • JavaScriptでHTMLの要素を操作するための仕組み
    • DOMはHTMLから作られる
    • ウェブサイトを構築するために使用される Web API の 1 つ
  • DOMは、これらのノードを抽出・追加・置換・削除するための汎用的な手段を提供するAPI
    • ノードとは
      • 文書を構成する要素や属性、テキストといったオブジェクトのこと

2. Nodeについて

ノード	ノードタイプの定数	ノードタイプの値	インタフェース
要素ノード	ELEMENT_NODE	1	Element
属性ノード	ATTRIBUTE_NODE	2	Attr
テキストノード	TEXT_NODE	3	Text
コメントノード	COMMENT_NODE	8	Comment
文書ノード	DOCUMENT_NODE	9	Document

参考)
https://developer.mozilla.org/ja/docs/Web/API/Node/nodeType

3. addEventListener() について

• 二つの引数を指定可能
  • ハンドラーを登録したいイベントの名前
  • それに反応して実行させたいコードを含んだ関数
    • 匿名関数を使って、実行したいコードを全部addEventListener() 関数の引数に書いてもOK

btn.addEventListener('click', function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

• Event Objects
  • イベントハンドラー関数内で event、evt、単に e などと名付けられた引数
  • イベントハンドラーとは
    • イベントを検出し、イベントに処理を与える
    • イベントとは
      • マウスボタンをクリックした、ページが読み込まれたなどの動作が起こった時に発生
      • 参考）https://phpjavascriptroom.com/?t=js&p=event