DAY23.JavaScript・jQuery学習編 Web制作初心者のためのjs基礎講座（DOM操作）

01.DOMとは

HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み
サイトに動きをつけたいときはDOM操作をする

Web制作する上で、ゴリゴリ複雑なJavaScriptコードをかける必要はない
「何をやっているのか」が分かって、カスタマイズできる程度の知識は必要

HTMLの階層構造を「ツリー構造」
全てのHTMLデータは一番上の階層から順番に
オブジェクトデータとしてまとめられている

全体のHTMLデータが入っているオブジェクトは「document」

全てのデータを持ったdocumentから
特定のHTMLデータを探し出し
様々なメソッドを当てていくことで
動きをつけたり文字を変更したりする

02.DOMの基本的な概念

1.HTMLデータを取得（idで取得編）

[document.getElementById]
documentの中から指定したidがついてるHTMLオブジェクトを探して取得

2.HTMLデータを取得（classで取得編）

[document.getElementsByClassName]
documentの中から指定したclassがついてるHTMLオブジェクトを探して取得
idとは違い、配列で返ってくる

3.HTMLデータを取得（タグで取得編）

[document.getElementsByTagName]
documentの中から指定したタグがついてるHTMLオブジェクトを探して取得
idとは違い、配列で返ってくる

4.テキストを書き変え

innerTextを使う
document.getElementById('id名').innerText = 'テキスト'

「documeent.取ってくるもの().処理」

03.HTML要素を追加

createElementで新規作成
const login_btn = document.createElement('a')
新規にaタグを作成

innerTextでテキストを追加
login_btn.innerText = 'ログイン'
テキストを追加

setAttribute(属性名, 値)で属性名, 値を追加
login_btn.setAttribute('id', 'login')
setAttribute(属性名, 値) id="login"を追加

login_btn.setAttribute('class','btn')
class="btn"を追加

login_btn.setAttribute('href','https://tokyofreelance.jp/')
href="https://tokyofreelance.jp/"を追加

親要素.appendChild(追加したい要素)で親要素に子要素を追加
document.getElementById('js-for-web').appendChild(login_btn)
親要素.appendChild(追加したい要素)でlogin_btnを追加

04.JavaScriptからクリック操作

click()でクリック操作
document.getElementById("id名").click()

05.イベント監視

1.イベント処理を追加（onload編）

window.onload() = funciton(){}
DOM（HTMLデータ）が読み込まれた後に実行したい処理を追加

function() {処理}
読み込み後に実行したい処理は{}の中に書く

2.イベント処理を追加（click編）

ユーザーによってボタンがクリックされたときの処理を追加

イベントの処理にはaddEventListener()メソッドを使う
第一引数に監視したいイベント
第二引数にそのイベントが起きた時の処理
第二引数は必ずfunction にしておく

clickの他にも監視できるイベントはたくさんある