DOM操作とは
JavaScriptはHTMLファイルの中身を操作することが出来ます。
HTMLファイル内にある要素を指定して操作することを、DOM（Document Object Model）操作と言います。
今まで練習ではdocument.write() を使ってきました。
ですが、実際のWeb制作では、document.write() は基本的に使いません。
理由は、ページの内容を上書きしてしまったり、思わぬ表示崩れの原因になることがあるからです。
これから学ぶDOM操作は、このdocument.write() よりも安全性が高く、実務でも使用できる方法です。
マスターして、より実践的なコードを書いていきましょう！
HTMLを操作・変更してみる
実際に操作しながら、確認してみましょう。
まだtest.htmlは空っぽなので、操作するための中身を<body>タグ内に入れます。
コピー＆ペーストしてもOKです。
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript超入門</title>
</head>
<body>
<div id="first">1個目のdivタグ</div>
<div id="second">2個目のdivタグ</div>
<div id="third">3個目のdivタグ</div>
<script src="test.js"></script>
</body>
</html>
HTMLのclass属性とid属性
上記で追加した部分は、classではなく id=""で名前が付けられています。
idもclassと同様に各要素に、任意の名前をつけることが出来ます。
CSSのセレクタとしても使えます。
使い分けに悩むclass属性とid属性ですが、最も大きな特徴は「同じidは1ページに1回しか使えない」という点。
この性質から、基本的にid属性での命名は、明確に特定する必要がある要素に対して使われます。
イメージで言うと、class属性は「赤い服の人」「名字が佐藤の人」など、ある条件に当てはまる人のグループ。
id属性はマイナンバーを使って個人を特定しているような形です。
HTMLでもイメージは同じです。
idは他の要素と間違えず、確実に特定したい部分に使うことがほとんどです。
今回のJavaScriptとの連携で考えてみましょう。
例えば、お客様に住所を入力してもらうと、お届け時間を表示するスクリプトがあるとします。
この場合、情報を取り出す部分・計算した時間を表示する場所を間違えると、表示がおかしくなってしまいますね。
つまり、明確に特定する必要があります。
そこでidの出番、というわけです。
反対に、1つしか存在しない要素でも、特定する必要がない場合はclass属性を使います。
デザインとしてヘッダー部分の背景色を黄色にしたい、なんて場合はclassで十分です。
【class属性とid属性の違い】
| id属性 | class属性 | |
|---|---|---|
| 主な使用用途 | 要素を特定する | CSSによる装飾を適用する |
| html文書内での使用回数 | 1回のみ | 1回でも複数でも可 |
| 1要素に命名できる数 | 1つのみ | 1つでも複数でも可 |
| セレクタの記号 | #（半角ハッシュ） | .（半角ドット） |
| スタイル適用の優先順位 | 高い | idに負ける |
JavaScriptでHTMLの中身を取り出す
JavaScriptを使ってHTMLから情報を取り出してみましょう。
下記のコードを、test.jsに書いてみて下さい。
alert(document.getElementById("first").innerHTML);
保存して、test.htmlをブラウザで開くと、アラートが表示されます。
内容には「1個目のdivタグ」と表示されています。
JavaScriptで指示している内容は、下図のイメージです。
JavaScriptでHTMLを書き換える
次に、<div class="second">の中にあるテキスト「2個目のdivタグ」を、JavaScriptを使って書き換えてみましょう。
下記のコードを、test.jsに書いてみて下さい。
document.getElementById("second").innerHTML="書き換えました";
保存して、test.htmlをブラウザで開きます。
先ほどと同じくinnerHTMLを使っていますが、文字が入れ替わっていますね。
innerHTMLは指定した要素の中身を取得できるだけではなく、イコールで定義した内容に書き換えることも出来ます。
取得した内容を表示する、なんて事もできます。
const firstdiv = document.getElementById("first").innerHTML;
document.getElementById("second").innerHTML= firstdiv;
