-
- 1. JavaScriptとは【JavaScriptの書き方入門】
- 2. JavaScriptの書き方、読み込み方法【JavaScriptの書き方入門】
- 3. JavaScriptの変数と定数を知ろう【JavaScriptの書き方入門】
- 4. JavaScriptの関数と基本的な書き方【JavaScriptの書き方入門】
- 5. JavaScriptのコメントアウト【JavaScriptの書き方入門】
- 6. JavaScriptでDOM操作（htmlを参照・操作）する【JavaScriptの書き方入門】
- 7. JavaScriptの「イベント」とイベントリスナー【JavaScriptの書き方入門】
- 8. 実践編～JavaScriptで格言ガチャを作ろう～【JavaScriptの書き方入門】
- 9. 実践編①JavaScriptで配列を作成する【JavaScriptの書き方入門】
- 10. 実践編②配列内の要素をランダムに１つだけ取り出す【JavaScriptの書き方入門】
- 11. 実践編③クリックで配列の要素をHTMLに表示する【JavaScriptの書き方入門】
JavaScriptでDOM操作（htmlを参照・操作）する【JavaScriptの書き方入門】
DOM操作とは
JavaScriptはHTMLファイルの中身を操作することが出来ます。
HTMLファイル内にある要素を指定して操作することを、DOM（Document Object Model）操作と言います。
今まで使っていたdocument.write() もhtmlファイルに書き出していますよね。
これだと書き出す場所は指定できませんが、指示の仕方を変えると「この場所に書き出して」と細かく命令することもできます。
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("second").innerHTML);
保存して、test.htmlをブラウザで開くと、アラートが表示されます。
内容には「1個目のdivタグ」と表示されています。
JavaScriptで指示している内容は、下図のイメージです。
JavaScriptでHTMLを書き換える
次に、<div class="first">の中にあるテキスト「1個目のdivタグ」を、JavaScriptを使って書き換えてみましょう。
下記のコードを、test.jsに書いてみて下さい。
document.getElementById("second").innerHTML="書き換えました";
保存して、test.htmlをブラウザで開きます。
先ほどと同じくinnerHTMLを使っていますが、文字が入れ替わっていますね。
innerHTMLは指定した要素の中身を取得できるだけではなく、イコールで定義した内容に書き換えることも出来ます。
取得した内容を表示させる、なんて事もできます。
const firstdiv = document.getElementById("first").innerHTML;
document.getElementById("second").innerHTML= firstdiv;
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
