【JavaScript】DOM
DOMはHTML文章をオブジェクトとして情報の取得する仕組みです。
DOMの操作を行うことで、HTMLの中身を変更することもできます。
前提として、以下のHTMLを使います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プログラム実行テスト</title> </head> <body> <h1>プログラム実行テスト</h1> <p>第1段落</p> <p>第2段落</p> <p>第3段落</p> <script></script> </body> </html>
要素の内容を操作する。
要素の内容を操作するには、「getElementsByTagName」を使います。書き方
document.getElementsByTagName('取得したい要素名')
実行例(ソース)
var ps = document.getElementsByTagName('p'); alert(ps[0]);
結果
上記のソースでは、変数psにP要素の0番目を取得します。
しかし、上記の書き方では「object HTMLParagraphElement」と出てきて、データを取得ができていません。
要素の内容を取得する
要素の中に入っている内容を取得するには、「innerHTML」を使います。
書き方
オブジェクト名 . innerHTML
実行例(ソース)
var ps = document.getElementsByTagName('p'); alert(ps[0].innerHTML);
結果
上記のソースでは、変数psのP要素の0番目にあるタグの内容を取得しています。
なので、結果は「第一段落」になります。
要素の内容を変える
要素の内容を書き換えることができます。これも「innerHTML」を使うことで可能です。書き方
オブジェクト名 . innerHTML = '文字列';
実行例(ソース)
var ps = document.getElementsByTagName('p'); //p要素の内容を書き換えます ps[0].innerHTML = 'P要素の0番目です';
結果
P要素の0番目が「第1段落」から「P要素の0番目です」に書き換えられています。
要素に内容を書き加える
要素の内容を書き加えることも可能です。書き方
オブジェクト名 . innerHTML = '文字列';
実行例(ソース)
var ps = document.getElementsByTagName('p'); //p要素の内容に文字列を書き加えます ps[0].innerHTML = ps[0].innerHTML + '<b>(New!)</b>';
結果
P要素の0番目に「New!」が書き加えられています。