👩‍💻TIL7. Vanilla JS:DOM,条件文

以下の記事では、Nomad Coderの「バニラJSでChromeアプリを作る」ことを学んだときに学んだことをまとめています.
HTMLとJavaScriptを同時に使うためには、HTMLの要素もJSで利用しなければなりませんよね?JSではCSSなどのHTMLの要素も選択できます.DOM(ドキュメントオブジェクトモデル)を直接使用!

🍰 DOM (Document Object Model)

DOMは、HTMLドキュメントのオブジェクトベースの表現です.DOMはHTMLの要素をJSからObject(オブジェクト)に変換します.

const title = document.getElementByID("title")

getElementByID後かっこにID名を記入し、HTMLのIDを対象に変換する.console.dir("title");オブジェクトtitleのプロパティリストを表示できます.

title.style.color="red"

このようにJavaScriptでHTMLの属性を操作することができます.これらの操作により、HTMLを変更せずにインタラクティブなページを作成できます.🤩

querySelctor()

document.getElementByID()その他、オブジェクトを作成するためのコードもあるdocument.querySelcetor()CSSセレクタと同様に、カッコにID名「#ID名」、カテゴリ名「.class名」を入力すればよい.querySelctor前に持参する元素の親元素を使用する.次に、Elementの最初のサブエレメントのみが返されます.

🍰 addEventListner()

addEventListner(type,listener)メソッドイベント発生時にイベントを処理する関数を呼び出す.typeに反応するイベントタイプとlistnerでイベントを処理する関数を作成します.

function handleResize() { 
  console.log("I've been resized.");
                        }
window.addEventListenr("resize",handleResize);

ここで注意したいのは、関数が使えないこと()あるいは、何があってもすぐに呼び出されます.

🍰 条件文

If (condition) {
  block
}
Else if (condition){ 
   block
         }
Else (condition){
   block
}

・&&:and、複数の条件で参加する野党

||:or、どんな条件にも耐えられるなら本当

===:JSで条件比較時の「等号」

なお、JSで色を比較する場合はRGB値しか使用できません.
いくつかの複雑な概念が現れて、何度も説明しなければ理解できませんが、動的な機能を実現することができて、これは私を興奮させて面白いです!🤩