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

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

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習28日目⏩<br><br>Web制作コース中級編DAY3💻<br><br>学習時間:2時間8分⏳<br><br>学習内容:JSのDOM操作について✏<br><br>学び📚<br>・HTMLのデータ取得<br>・JSからテキストを書き換える<br>・JSでHTMLの要素を追加<br>・JSからアクションを起こす<br>・イベント処理<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/BB5wmiKSEL">pic.twitter.com/BB5wmiKSEL</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1379695919055183876?ref_src=twsrc%5Etfw">April 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【学び】

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プロパティ一覧](https://developer.mozilla.org/ja/docs/Web/API/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)の部分がデイトラと表示されるよになる
```
参考サイト: [イベント一覧](https://developer.mozilla.org/ja/docs/Web/Events)