JavaScript入門 DOM操作とは

#はじめに
今回は、Youtubeでトラハックのエンジニア学習ゼミを参考にして
勉強と復習のためにJavaScriptのDOM操作について記事にしていこうと思います。

#DOMとは

• Document Object Modelの略
• JavaScriptからHTMLにアクセスする窓口
• HTML要素の値を取得したり変更する　→　DOM操作

#なぜDOM操作が必要なのか
JavaScriptはWebページの「振る舞い」を決める　→　振る舞いを変えるためにHTMLを変更する

ユーザの望む操作を行うには...

1. 入力したデータを取得する
2. 新しいデータを表示する
3. データを送信する

#取得する方法１　( id指定 )

HTML

<div id="hoge">
hogeっていうidが指定されている
</div>

JavaScript

const element = document.getElementById("hoge")
console.log(element.innerText)

#取得する方法２　( class指定 )

HTML

<div class="foo">fooっていうclassが指定されているdiv要素１</div>
<div class="foo">fooっていうclassが指定されているdiv要素２</div>
<div class="bar">barっていうclassが指定されているdiv要素１</div>

JavaScript

const classes = document.getElementsByClassName("foo")
for (const classNode of classes) {
console.log(classNode.innerText)
}

getElementsBy...で要素を複数指定し。classesには配列を代入。
そして、For文で配列を回して表示をする

#取得する方法３　( form要素取得 )

HTML

<form name="demoForm">
 <div>
  <label for="title-id">タイトル</label>
  <input id="title-id" name="title" type="text" />
 </div>
</form>

JavaScript

const forms = document.forms.demoForm

// 値を取得したいinput要素のnameを指定
const title = forms.title.value
console.log(title)

#参考
DOM操作できなきゃJS使う意味がない【分かりすぎて怖いJavaScript入門】