【Java Script】DOMの操作

今回の内容

1.DOMとは
2.DOMの操作

1.DOMとは

こばゆた

ドム (DOM) は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロb…

チャッピー

多分それじゃないと思う

こばゆた

DOMとはDocument Object Modelの略でHTMLやCSSを操作したり、イベントを作成したりとさまざまなことができます。(ざっくり)

↓ちなみにMDNからの引用です。

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

こばゆた

いと難しです

また重要なのはJavaScriptで操作できるのはHTMLではなくDOMの方であり、DOMを操作してもHTML自体に影響はないということです。

DOMは以下の図のような形になっておりDOMツリーとも呼ばれます。

きなこ

どこかで見たことあるなと思ったらHTMLの形みたいだね

こばゆた

それの一番上にあるのがdocumentというもので、JavaScriptを使ってこのdocumentを操作して行くのがDOM操作ということになります

2.DOMの操作

DOMの操作をするには①要素を取得して、②命令を出すという工程を経る必要があります。

<p id="greet">Hello!</p>

こばゆた

こんな感じのテキストがあったとします

これをJavaScriptを使って書き換えると

document.getElementById('greet').textContent = 'Good Bye!';
//id名'greet'を取得してテキストを書き換える

Hello!

こばゆた

こうなります！

ではササッとDOM操作の一連の流れを見てみましょう

テキストの書き換え

STEP1
documentを先頭に書く
```
document
```
documentから取得するという意味で”document”と書きます。
STEP2
要素を取得する
```
document.getElementById('greet')
```
いずれ解説しますが今回はidを取得するので”getElementById”というものを書き.(ドット)で繋ぎます。
また大文字、小文字に気を付けるのと長い文章なので間違えないようにします。
STEP3
テキストを書き換える
```
document.getElementById('greet').textContent = 'Good Bye!';
```
テキストを書き換えるときは”textContnt”を使い、書き換えたい文章を＝で結びます。