DOM操作
-
documentオブジェクトのメソッド（HTML要素自体を操作）
getElementById()：指定されたID属性を持つ要素を取得
getElementsByClassName()：指定されたクラス名を持つすべての要素を取得
getElementsByTagName()：指定されたタグ名を持つすべての要素を取得
querySelector()：指定されたCSSセレクターに一致する最初の要素を取得
querySelectorAll()：指定されたCSSセレクターに一致するすべての要素を取得
createElement()：指定された要素の名前で新しい要素を作成
appendChild()：指定された要素を、指定された親要素の子要素として追加
removeChild()：指定された子要素を、指定された親要素から削除
setAttribute()：指定された属性と値を持つ指定された要素に属性を追加
getAttribute()：指定された属性の値を取得
addEventListener()：特定のイベントが発生したときに、指定した関数を呼び出すことができる。ボタンがクリックされたときに、そのボタンに関連付けられた関数を呼び出すことができる
removeEventListener()：指定されたイベントのリスナー関数を指定された要素から削除
querySelectorAll()：指定されたセレクターに一致するすべての要素を返す
querySelector()：指定されたセレクターに一致する最初の要素を返す -
elementオブジェクトのメソッド（HTML要素自体を操作）
getElementById(id): 引数で指定されたidを持つHTML要素を取得
querySelector(selector): 引数で指定されたCSSセレクタに一致する最初の要素を取得
querySelectorAll(selector): 引数で指定されたCSSセレクタに一致するすべての要素を取得
appendChild(node): 引数で指定されたノードを、要素の子要素の末尾に追加
removeChild(node): 引数で指定された子要素を要素から削除
setAttribute(attribute, value): 引数で指定された属性に値を設定
getAttribute(attribute): 引数で指定された属性の値を取得
style.property = value: 引数で指定されたCSSプロパティに値を設定
classList.add(className): 引数で指定されたクラスを要素に追加
classList.remove(className): 引数で指定されたクラスを要素から削除
classList.contains(className): 引数で指定されたクラスが要素に含まれているかどうかを判定
classList.toggle(className): 引数で指定されたクラスが要素に含まれている場合は削除し、含まれていない場合は追加
addEventListener(event, function): 引数で指定されたイベントが発生したときに、指定された関数を実行
dispatchEvent(event): 引数で指定されたイベントを発生させます。 -
classListオブジェクトのメソッド（HTML要素のクラス属性を操作）
add(class1)：要素に指定されたクラスを追加
remove(class1, class2, ...)：要素から指定されたクラスを削除
toggle(class, true|false)：指定されたクラスが要素に存在する場合は削除し、存在しない場合は追加します。引数にtrueまたはfalseを指定すると、クラスの追加または削除contains(class)`：指定されたクラスが要素に含まれているかどうかをチェックし、結果をtrueまたはfalseで返す
用語
DOM（Document Object Model）：HTMLなどを解釈し木構造で表現したもの
これまでDOMを直接操作していた
それではレンダリングコストが高い、コードが複雑化しやすい
それを解決したのが仮想DOM
いきなりDOMを操作せず、JS上で仮想DOMを操作し差分を出してからDOMに反映させる
パッケージマネージャー：
・内部ではNode.jsが動いている。
・依存関係を勝手に解決してくれる。
・import先が明示的にわかる
・世界中で公開されているパッケージをコマンド１つで利用できる
・チーム内での共有も簡単
NPM：パッケージのレジストリ
packeage.json：設計書
package-lovk.json：依存関係、バージョンの解決。
node_modules：モジュールの実体。（githubにはあげない）
ECMScript：JSの標準規格、毎年一回発表される
モジュールバンドラー（webpack）：複数のJSファイルを1つにまとめるためのもの
トランスパイラ：新しいJSの記法を古い記法に変換してくれる
SPA（Single Page Applicaiton）：HTMLは1つのみでJSで画面を切り替える。
JSでHTMLのDOMを書き換えるて、HTMLはそのままだけど画面が変わったように見える。
メリット・・ページ遷移事のちらつきがなくなる。コンポーネント分割が容易になることで開発効率アップ
例（作成途中）
element =documetn.createElement(要素)：指定した要素を新しく作る
element.innnerText = ""：要素のテキストを設定
documet.body.appendChild(element)：要素をbodyに追加
innerHTMLプロパティでテキストを変更する
addEventListner(イベント名,イベント時の挙動)：要素に対して指定したイベントが発生したときの挙動を設定
イベント例
clck：要素をクリックした時
mouseover：要素の上にカーソルが来た時
mouseleave：要素の上からカーソルが外れた時
insertAdjacentHTML()は、指定したHTML文字列をDOMツリーに挿入するメソッドです。このメソッドは、挿入する位置を指定することができます。
textContentは、要素のテキストコンテンツ（HTMLタグを含まないプレーンテキスト）を取得または設定するためのプロパティです。このプロパティは、テキストノードの内容を取得するためによく使用されます