【JavaScript入門】DOMを使ってページ内の要素を操作しよう！
DOMとは？
DOM（ドム）とは「Document Object Model」の略です。Document にアクセスするための色々な命令のことです。
ツリー構造について
Chrome Developer Toolの Elementsパネルでツリー構造を確認できます。下記の場合、html の子要素として head と body があって、body の子要素として h1 や p 等があるといった状態です。DOM を弄る時はこのツリー構造が大事になってきます。
ｐ要素を書き換える
下記のｐ要素を書き換えます。なお、idを振っておくほうが扱いやすくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head><body>
<h1>見出し</h1>
<p id="msg">こんにちは！</p>
</body>
</html>
document.getElementById('msg')で取得し、textContent でテキストを書き換えたり、style.colorで色を付けたりすることができます。
var e = document.getElementById('msg');
e.textContent="Hello!";
e.style.color="red";
新しく要素を作る
body 要素の中に、p 要素を追加して、その p 要素の中に「hello world」という テキストを入れてみます。
①要素の追加
Document.createElement() メソッドを使用することで要素の追加ができます。TagName で指定した HTML 要素を生成します。構文は下記となります。
var element = document.createElement(tagName);
②テキストノードの作成
document.createTextNodeを使って「hello world」という テキストノードを生成します。構文は下記となります。
var text = document.createTextNode(data);
⓷ bodyに①のp 要素と②の「hello world」を追加する。
document.body.appendChild()メソッドを使うことで追加することができます。 bodyにｐ要素を追加する場合は下記となります。
var greet = document.createElement('p');
document.body.appendChild(greet);
bodyにｐ要素およびテキストを追加する場合は下記となります。
var greet = document.createElement('p');
text = document.createTextNode('Hello world');
document.body.appendChild(greet).appendChild(text);
