デイトラweb制作中級編 DAY3

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までの基本の範囲をしっかりと押さえて次に進みたいと思います!

コメントを残す

メールアドレスが公開されることはありません。