デイトラweb制作中級編 DAY3
nakano
DOMとは
DOM ・・・ HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み
HTMLは階層形式（html > body > section...）となっており、これを「ツリー構造」という
「document」には、ツリー構造のHTMLデータが全部入っている
引用元：DOM（Document Object Model）について
DOMの基本（HTML要素の取得）
HTML要素の取得
1. document.getElementById(' id名 ')
2. document.getElementsByClassName(' class名 ')[ index番号 ]
3. document.getElementsByTagName(' タグ名 ')[ index番号 ]
※index番号 → デイトラweb制作中級編 DAY2
取得したHTMLの操作（Day3の場合）
①テキストの変更
document.getElementById('service-title').innerText = 'デイトラ'
変更前
変更後（タイトルが「デイトラ」に）
②要素の追加
1. const login_btn = document.createElement('a')
2. login_btn.innerText = 'ログイン'
3. login_btn.setAttribute('id', 'login')
4. login_btn.setAttribute('class','btn')
5. login_btn.setAttribute('href','https://tokyofreelance.jp/')
6. document.getElementById('js-for-web').appendChild(login_btn)
1. 「a」タグを新規追加
2. テキストを「ログイン」にする
3.,4.,5. 「id」「class」「URL」を追加
→ 「setAttribute(' 属性名 ',' 値 ')」が重要
6. 新規追加する「a」タグの位置を決める
→ 親要素を「js-for-web」、子要素を「login_btn」
変更前
変更後（ログインボタンの追加）
③ボタンの操作（JavaScriptから）
JavaScript
document.getElementById("register").click()
HTML
<a href="https://tokyofreelance.jp/" id="register" class="btn btn-register">登録</a>
変更前
変更後（リンク先に移動）
④イベント監視「window.onload」
window.onload = function() {
document.getElementById('service-title').innerText = 'デイトラ'
}
「window.onload」 → HTMLデータが読み込まれたとき
変更前
変更後（タイトルが「デイトラ」に）
⑤イベント監視「addEventListener()」
document.getElementById("button").addEventListener('click', function() {
document.getElementById('service-title').innerText = 'デイトラ'
})
「addEventListener( 第一引数 , 第二引数 )」
第一引数 ・・・ 監視するイベント
第二引数 ・・・ イベントが起きた時の処理
変更前
変更後（「クリック」ボタンをクリック → タイトルが「デイトラ」に）
まとめ
今回はDOM操作について学習しました。
「JSFiddle」というサービスのおかげで、実際にコードを書きながら
追加した要素を確認できたので、すんなりと覚えることができました。
Day1~3までの基本の範囲をしっかりと押さえて次に進みたいと思います！
