TIL 035 JavaScript:DOMとイベント

2902 ワード
TIL JavaScript テキストリンク

1. DOM(Document Object Model)

  • DOMは,ウェブページのHTMLを階層化し,ツリー構造を形成するオブジェクトモデルである.
  • JSは、このモードを使用してWebページにアクセスしたり、ページを変更したりすることができます.
  • DOMは、HTMLページとスクリプト言語(JS)を接続します.
  • JSでは、文書というグローバルオブジェクトを使用してHTMLにアクセスできます.
  • JSの文書オブジェクトはDOM構造にアクセスするゲートであり,文書オブジェクトはHTML文書を表すといえる.

    • 2.なぜHTMLにアクセスするのですか?


  • ドキュメントオブジェクトは、DOMツリーのルートノードにアクセスできます.
  • ドキュメントオブジェクトを使用して要素にアクセスするように、要素のプロパティにもアクセスできます.

    • 1)要素コンテンツへのアクセスによる変更

    document.body.innerHTML = '내용 다 바꿈';

    2)特定の要素へのアクセスによる変更

    let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';
  • 背景-色ではなく背景色の使用に注意
  • JSではハイフネーション(-)が使用できないためCamelCaseアクセスを使用します.

    • 3. Event

  • Webサイトで実装されるインタラクションは、HTMLまたはCSSのみでは実現できません.JavaScript符号化を使用する必要があります.このように特定の要素にインタラクティブに反応できることを活動と呼ぶ.
  • 活動の種類:以下に示す.(そして!!)
  • クリックイベント
  • マウスイベント
  • スクロールイベント
  • タッチイベント
  • resize(画面サイズの変更)イベント
    注意:https://www.w3schools.com/js/js_htmldom_eventlistener.asp

    • 4. addEventListener

  • イベントの保留中に使用される関数はaddEventListerです.イベントがいつ発生するかを聞いていると、受信した関数がパラメータとして実行されます.
    • 요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});
  • に示すように、addEventListenerを特定の要素に貼り付け、イベントのタイプとイベントが発生したときに実行する関数をパラメータで渡します.
  • のように関数パラメータとして伝達される関数をコールバック関数と呼ぶ.
    • C#高性能大容量SOCKET同時(五):粘着、分包、解包
    JSP Servlet