JavaScriptの関数や繰り返しなどの基本は学習した。
であれば、その次はいよいよHTMLで作成したページへの組み込みをされる方が多いのではないでしょうか。
今回はJavaScriptでのHTML操作の基本である
- HTMLの書き換え方法
について解説をしていきたいと思います。
目次
HTMLの書き換え方法
JavaScriptでHTMLを操作する場合、いきなり初めてのプロパティやメソッドが出てきますので、急に難しく感じるかもしれません。
ですので、まずは基本的な仕組みをシンプルに理解することが大切です。
基本的な仕組みというのは、
- HTMLの「どの要素に対して」「なんの操作をするか」
です。
「どの要素に対して」を指定する
まずは「どの要素に対して」を指定する方法から見ていきましょう。
id指定する方法
要素のid名で要素を指定する場合の方法です。
|
1 |
document.getElementById(ID名); |
例えば、id=”hoge”のついた要素を指定する場合はこのように書きます。
|
1 |
document.getElementById('hoge'); |
CSSセレクタで指定する方法
CSSセレクタで要素を指定する場合の方法です。
|
1 2 3 |
document.querySelector(CSSセレクタ); //最初に該当するもの document.querySelectorAll(CSSセレクタ); // 該当するもの全て |
例えば、h1タグを指定する場合はこのように書きます。
|
1 2 3 4 |
document.querySelector('h1'); //h1タグが複数ある場合は、最初のh1要素のみ document.querySelectorAll('h1'); //h1タグが複数ある場合は、全てのh1要素 |
「なんの操作をするか」を指定する
どの要素かを指定できるようになったら、今度は「何の操作をするか」の方法を見ていきましょう。
今回は「書き換え」というテーマでのお話ですので、要素ないの文字の書き換え方法について見ていきます。
テキストだけを書き換える
まずは要素ないのテキストだけを書き換える方法です。
|
1 |
要素.innerText = '置き換えたいテキスト'; |
innerTextプロパティを使用しますが、例を見ていきましょう。
まずはこんなHTMLがあるとします。
|
1 2 3 4 5 6 7 |
<body> <h1>ここは見出しです</h1> <p>ここは段落です</p> </body> |
この場合、ブラウザで開くとこのように表示されるはずです。
ここは見出しです
ここは段落です
今度はJavaScriptを加えてみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <h1>ここは見出しです</h1> <p>ここは段落です</p> <script> document.querySelector("p").innerText = "innerTextで変更してみました！"; </script> </body> |
これでブラウザで開くとこのように表示されるはずです。
ここは見出しです
innerTextで変更してみました！
要素ごと書き換える
今度は、タグごと書き換える方法です。
|
1 |
要素..innerHTML = '置き換えたい内容'; |
innerHTMLプロパティを使用しますが、例を見ていきましょう。
では同じようにJavaScriptを加えてみた例を見ていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <h1>ここは見出しです</h1> <p>ここは段落です</p> <script> document.querySelector("p").innerHTML = "<h1>innerHTMLで変更してみました！</h1>"; </script> </body> |
これでブラウザで開くとこのように表示されるはずです。
ここは見出しです
innerHTMLで変更してみました！
あくまでもpタグの中身を置き換えているだけですので、pタグがなくなったわけではありません。
開発ツールで確認いただければお分かりだと思いますが、上記の置き換えで下記のようなHTMLになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <h1>ここは見出しです</h1> <p> <h1>innerHTMLで変更してみました！</h1> </p> <script> document.querySelector("p").innerHTML = "<h1>innerHTMLで変更してみました！</h1>"; </script> </body> |
元のタグごと消えるわけではありませんのでご注意ください。
まとめ
今回は、これからJavaScriptでHTML要素の置き換えをされる方向けに
- HTMLの書き換え方法
について解説いたしました。
ここを理解できればfor文の基本的な使い方はOKですので是非マスターしてみてください。
