JavaScriptの基礎、DOM操作について

#デイトラWeb制作コース中級編DAY3の学び

【この記事に書いてあること】

プログラミング学習28日目⏩

Web制作コース中級編DAY3💻

学習時間:2時間8分⏳

学習内容:JSのDOM操作について✏

学び📚
・HTMLのデータ取得
・JSからテキストを書き換える
・JSでHTMLの要素を追加
・JSからアクションを起こす
・イベント処理#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/BB5wmiKSEL

— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 7, 2021

#　【学び】

1

【DOMとは】

HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと

2
【JavaScriptの基本的ルール】

maiin.js

document + どこで何をするのか(取得元の名前) + 取得したモノの処理

↓

document.getElementById('service-title').innerText 

３

【HTMLデータを取得する】

①　＜idで取得する＞

document.getElementByIdを使い、documentの中から指定したidがついている、HTMLコードを探す

maiin.js

alert( document.getElementById('id名').outerHTML )

② ＜classで取得する＞

document.getElementsByClassNameを使い、documentの中から指定したclassがついている、HTMLコードを探す

maiin.js

 alert( document.getElementsByClassName('class名')[0].outerHTML )
 alert( document.getElementsByClassName('class名')[1].outerHTML )

＊　classで取得した場合は、配列のインデックスを記入するのを忘れない！

③　＜タグで取得する＞

document.getElementsByTagNameを使い、documentの中から指定したタグがついている、HTMLコードを探す

maiin.js

　alert( document.getElementsByTagName('タグ名')[0].outerHTML )

＊　タグで取得した場合は、配列のインデックスを記入するのを忘れない！

４

【テキストを書き換える】

maiin.js

document.getElementBy取得元('取得元の名前').innerText = '変更後テキスト'

5

【JavaScriptでHTMLの要素を追加】

• setAttribute(属性名, 値)　→　属性を追加する
• 親要素.appendChild(追加したい要素) →　指定した親要素に子要素を追加する

＜ログインボタンを追加してみる＞

maiin.js

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

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

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

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

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

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

参考サイト: JavaScriptのElementプロパティ一覧

6

【JavaScriptからアクションを起こす】

＜クリック操作をする＞

maiin.js

document.getElementById("id名").click() 

7

【イベント処理を追加する】

①　＜outload(ページをロードしたら)＞　

window.onload() = funciton(){}
　ページを更新したあと、に実行したい処理をfunction(){ }の中に記入する

maiin.js

 window.onload = function() {
    document.getElementById('service-title').innerText = 'デイトラ' 
} 

↓

ページを更新したあと、(service-title)の部分がデイトラと表示されるよになる

　
②　＜click（ボタンをクリックしたら）＞

addEventListener()

　第一引数に監視したいイベント、第二引数にそのイベントが起きた時の処理を書く
　また、第二引数には必ずfunction を記入する

maiin.js

document.getElementById("button").addEventListener('click', function() 
{
  document.getElementById('service-title').innerText = 'デイトラ' 
})

↓

指定したボタンをクリックすると(service-title)の部分がデイトラと表示されるよになる

参考サイト: イベント一覧