はじめに
JavaScriptはフロントエンドまたはクライアントサイドの言語とされており、ブラウザで表示されている画面を操作することができます。
今回、どのような仕組みでJavaScriptがブラウザ上で機能しているかまとめました。
HTMLがブラウザで表示されるまでの流れ
HTMLは文字の羅列であるため、そのまま表示すると見にくいデータです。そのため、JavaScriptやCSSでHTMLを装飾することで見やすくしています。具体的には文字の色や大きさを変えたり動きをつけたりします。
そのための手順は、
①HTMLをDOMツリーに変換する
②JavaScriptやCSSで装飾する
③ブラウザで表示する
という流れになります。
HTMLをDOMツリーに変換する
DOM(Document Object Model)とはHTMLを解析しデータを作成する仕組みです。解析されたデータは階層構造となり、これをDOMツリーまたはドキュメントツリーといいます。
HTMLをDOMツリー変換して初めてデータを操作することができます。つまり、データをJavaScriptで操作するためにはHTMLをDOMツリーに変換する必要があります。
JavaScriptやCSSで装飾する
HTMLをDOMツリーに変換した後JavaScriptやCSSで装飾していきますが、ここではJavaScriptを例にします。
手順は、
①HTMLを取得する
②イベントが発火する
③関数が実行される
という流れになります。
JavaScriptでHTMLを取得する方法
JavaScriptを使用してDOMツリーからHTMLを取得する方法は、id名、class名、セレクタ名から取得する方法があります。
//id名がexampleの要素を指定する場合
document.ElementById("example")
//class名がexampleの要素を指定する場合
document.ElementsByClassName("example")
//h1タグの要素を指定する場合
document.querySelectorAll("h1")
イベント発火する方法
JavaScriptはある出来事が起きた後に関数が実行されるようにできています。ある出来事はイベントといい、出来事が起きることをイベント発火といいます。イベントの種類はページをロードすること、取得した要素をクリックすることなど様々あります。
//取得した要素を変数exampleに代入する
const expample = document.ElementById("example")
//取得した要素expampleがクリックされると関数が実行される
expample.addEventlistener('click', 関数)
//取得した要素expampleにマウスを合わせると関数が実行される
expample.addEventlistener('mouseover', 関数)
//取得した要素expampleからマウスを外すと関数が実行される
expample.addEventlistener('mouseout', 関数)
実行される関数の例
イベント発火した後は、関数が実行されます。その例を記載します。
//取得した要素を変数exampleに代入する
const expample = document.ElementById("example")
//取得した要素expampleにマウスを合わせると、expampleの背景が赤く変化する
expample.addEventlistener('mouseover', function(){
example.setAttribute("style", "background-color:red;")
})
//取得した要素expampleからマウスを外すと、exampleの背景が元に戻る
expample.addEventlistener('mouseout', function(){
expample.removeAttribute("style", "background-color:red;")
})