IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 練習講座】DOM操作基礎

[JavaScript 練習講座]DOM操作基礎

本講座の学習内容は、WEBページの表示を変更する方法である。 この学習を通して、プログラムに慣れて頂く事が最大の目的である。 HTMLやCSSについては「学習済み」という判断の元、学習を進める。 もしHTMLやCSSに不安がある方は、そちらを学習した後にこちらを学習してほしい。

DOM操作とは

WEBページには、様々なタグが存在する。 画像を表示する場合、<img>タグを利用する。 文字を表示する場合、<p>タグを利用する。 リンクを表示する場合、<a>タグを利用する。 JavaScriptを利用すると、これらのタグの背景色や文字の色、 タグを追加・削除等をする事ができる。 このようにタグの表示内容を変更する事を、一般的にDOM操作と言う。

リンクをクリックするとJavaScriptが実行する

DOM操作を学習する前の準備として、簡単なHTMLサンプルを掲載する。

001<html>
002<head>
003<script>
004
005function clickLink () {
006
007  //ダイアログを表示
008  alert ( "OK" );
009}
010
011</script>
012</head>
013<body>
014  <a href="javascript:clickLink()" >Click</a>
015</body>
016</html>

プログラムを実行すると、「Click」リンクが表示される。 「Click」リンクをクリックすると「OK」と表示する。

Click

Webブラウザでファイルを開くと、Clickリンクが表示される。 Clickリンクをクリックすると、「OK」と表示する。 このサンプルを利用して、 「リンクをクリックすると、ダイアログが開く」という点を学習する。
このサンプルプログラムは、HTMLファイルの中にJavaScriptを記述して、 リンクをクリックすると、JavaScriptの関数を実行するようにプログラミングした。 まず、HTMLファイルにJavaScriptを記述する方法を見る。

JavaScriptを記述する場所 JavaScriptはHTMLファイルの <script>から</script>の間に記述する。

JavaScriptをHTMLファイルに書く場合、 <script>から</script>の間に記述する。 サンプルプログラムでは、3行目に<script>が記述されている。 ここからJavaScriptの記述が始まる。 11行目に</script>がある。ここでJavaScriptの記述が終了する。

001<html>
002<head>
003<script>
004
005function clickLink () {
006
007  //ダイアログを表示
008  alert ( "OK" );
009}
010
011</script>
012</head>
013<body>
014  <a href="javascript:clickLink()" >Click</a>
015</body>
016</html>

このファイルの動作を確認する。 ファイルをWebブラウザで開くと、 「Click」というリンクが表示される。そして、「Click」リンクをクリックすると、 clickLink()関数が実行する。

リンクにJavaScript関数を設定 <a href = "javascript:関数名()" >ラベル</a>

リンクをクリックした時に、JavaScriptの関数を実行する記述方法である。
aタグのhref属性に、"javascript:[関数名()]"と記述する。 リンクをクリックすると、ここで指定した関数が実行する。 こんかい、「Click」リンクのhref属性に
javascript:clickLink() と記述した。リンクをクリックするとclickLink()関数が実行する。

001<html>
002<head>
003<script>
004
005function clickLink () {
006
007  //ダイアログを表示
008  alert ( "OK" );
009}
010
011</script>
012</head>
013<body>
014  <a href="javascript:clickLink()" >Click</a>
015</body>
016</html>

プログラムの5行目にclickLink()関数が存在する。 clickLink()関数が実行すると、「OK」と表示する。 解説は以上である。

DOM操作(タグの文字を変更する)

タグのオブジェクトをJavaScriptで利用するサンプルプログラムである。 ここでDOM操作の基礎を学習する。

001<html>
002<head>
003<script>
004
005function clickLink () {
006
007  //[div]タグを取得
008  const div = document.getElementById ( "test" ) ;
009
010  //文字列を設定
011  div.textContent = "Hello DOM" ;
012}
013
014</script>
015</head>
016<body>
017  <div id = "test" >IORI</div>
018  <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>

Webブラウザでファイルを開くと、「IORI」と「Click」リンクが表示する。 「Click」リンクをクリックすると、「IORI」の文字列が「Hello DOM」へ変更する。

IORI
Click
Hello DOM
Click

特定のタグに、文字列を記述するサンプルプログラムである。 このプログラムのポイントを記載する。

  1. HTMLタグの文字を変更したい
  2. JavaScriptでHTMLタグのオブジェクトを取得する
  3. JavaScriptでHTMLタグの文字を変更する処理

HTMLタグの文字を変更するというのが、プログラムの目標である。 HTMLタグの文字を変更するには、JavaScriptを利用する。 JavaScriptでHTMLタグの文字を変更するには、 まず、HTMLタグのオブジェクトが必要である。

DOM操作の基本 HTMLタグのオブジェクトをJavaScriptで取得し、 オブジェクトのプロパティを変更する。

オブジェクトの特定のプロパティを変更(操作)する事により、 HTMLタグの見た目を変更する。

001<html>
002<head>
003<script>
004
005function clickLink () {
006
007  //[div]タグを取得
008  const div = document.getElementById ( "test" ) ;
009
010  //文字列を設定
011  div.textContent = "Hello DOM" ;
012}
013
014</script>
015</head>
016<body>
017  <div id = "test" >IORI</div>
018  <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>

解説する。 Webブラウザでファイルを開くと「IORI」という文字列と、「Click」リンクが表示する。 17行目のdivタグに注目する。このタグは文字列「IORI」を表示するためのタグである。 こんかい、リンクをクリックすると、このタグの文字列を変更したい。 つまり、このタグのオブジェクトをJavaScriptで利用する。 そのため、divタグにidを設定した。

017<div id = "test" >IORI</div>

id属性の値を「test」とした。このidを利用して、タグのオブジェクトをJavaScriptで取得する。 実際の取得方法は後ほど見る。 「Click」リンクを確認する。

018<a href="javascript:clickLink()" >Click</a>

Clickリンクのaタグのhref属性に、JavaScriptが設定されている。 Clickリンクをクリックすると、clickLink()関数が実行する。

005function clickLink () {
006
007  //[div]タグを取得
008  const div = document.getElementById ( "test" ) ;
009
010  //文字列を設定
011  div.textContent = "Hello DOM" ;
012}
013
014</script>
015</head>
016<body>
017  <div id = "test" >IORI</div>

Clickリンクをクリックすると、5行目で定義されたclickLink()関数が実行する。 8行目で document.getElementById()関数が実行して、id属性の値が「test」のタグを取得する。

HTMLタグのオブジェクトを取得する方法 document.getElementById ( "[idの値]" ) ;

一番重要な関数である。これがなくては始まらない。 HTMLタグを変更するには、 HTMLタグのオブジェクト(箱)が必要である。 そのためHTMLタグのオブジェクトを取得するための関数が必要となる。 その関数がgetElementById()関数である。 特定のタグを取得する場合、 getElementById()関数を実行する。 これは定型文である。解説は不要だろう。少し解説する。
まず、documentを解説する。

documentオブジェクト Webブラウザの画面を管理するオブジェクト

document とはWebブラウザの画面を管理するオブジェクトである。 オブジェクトは「便利な関数やプロパティを詰め込んだ箱」である。 たとえば、Mathオブジェクトは「数学的な関数を詰め込んだ箱」であった。 documentオブジェクトは「Webブラウザの画面を管理する関数を詰め込んだ箱」である。
documentオブジェクトには、様々な関数とプロパティが用意されている。 getElementById()関数も、その一つである。 getElementById()関数は、idを指定してタグのオブジェクトを取得する関数である。 HTMLファイルに記述されたタグを取得したい場合、
document.getElementById ( "[idの値]" ) ;
このプログラムを利用する。 このプログラムを実行すると、引数で指定したidを持つタグの オブジェクトを取得できる。

005function clickLink () {
006
007  //[div]タグを取得
008  const div = document.getElementById ( "test" ) ;
009
010  //文字列を設定
011  div.textContent = "Hello DOM" ;
012}
013
014</script>
015</head>
016<body>
017  <div id = "test" >IORI</div>

解説を続ける。 8行目で「idが"test"」のタグを取得して変数divへ代入する。 idの値が「test」のタグは、文字列「Hello」のdivである。 このdivのオブジェクトが変数divへ代入される。
11行目で、そのdivタグに文字列「Hello DOM」を代入する。

タグに記載される文字列を保管するプロパティ タグのオブジェクト.textContent

タグ(のオブジェクト)にはtextContentというプロパティが存在する。 このtextContentプロパティには、タグに記載される文字列が保管されている。 逆に言うと、textContentプロパティに文字列を代入すると、 その文字列がタグに表示する
こんかい11行目で、タグのtextContentプロパティに文字列「Hello DOM」を代入する。 つまり、divタグに文字列「Hello DOM」が表示する。

005function clickLink () {
006
007  //[div]タグを取得
008  const div = document.getElementById ( "test" ) ;
009
010  //文字列を設定
011  div.textContent = "Hello DOM" ;
012}
013
014</script>
015</head>
016<body>
017  <div id = "test" >Hello DOM</div>

このように表示する文字が変更される。

DOM操作(タグを取得した後、タグの文字列を取得する)

001<html><head>
002<script>
003
004function clickLink () {
005
006  //[div]タグを取得
007  const div = document.getElementById ( "test" ) ;
008  
009  //文字を取得
010  const txt = div.textContent ;
011  
012  //ダイアログを表示
013  alert ( txt );
014}
015</script>
016</head>
017<body>
018  <div id = "test" >Hello</div>
019  <a href="javascript:clickLink()" >Click</a>
020</body>
021</html>

ファイルをWebブラウザで実行すると、「Hello」という文字列と、 「Click」リンクが表示する。 「Click」リンクをクリックすると、「Hello」と表示する。

Hello
Click

このプログラムはdivタグに記載された文字列を取得して、その文字列をダイアログに表示するプログラムである。
プログラムを解説する。 Webブラウザでファイルを開くと、「Hello」という文字列と、「Click」リンクが表示する。 「Click」をクリックすると、clickLink()関数が実行する。

004function clickLink () {
005
006  //[div]タグを取得
007  const div = document.getElementById ( "test" ) ;
008  
009  //文字を取得
010  const txt = div.textContent ;
011  
012  //ダイアログを表示
013  alert ( txt );
014}
015</script>
016</head>
017<body>
018  <div id = "test" >Hello</div>

clickLink()関数は4行目で定義されている。 clickLink()関数が実行すると、7行目で、idの値が「test」のタグを取得する。 idの値が「test」のタグは、 18行目のdivタグである。このタグを取得して、変数divに代入する。 10行目で、divタグのtextContentプロパティの値を取得する。

タグに記載される文字列を保管するプロパティ タグのオブジェクト.textContent

タグに記載された文字列は、textContent プロパティに入っている。 このtextContentプロパティをプログラムで利用する。 10行目でdivタグに記載された文字列を取得して変数txtに代入する。 divタグの文字列は「Hello」である。 変数txtに文字列「Hello」が入る。 13行目で、変数txtの値をダイアログで表示する。 変数txtの値は「Hello」なので、「Hello」が表示する。

まとめ

JavaScriptを記述する場所 JavaScriptはHTMLファイルの <script>から</script>の間に記述する。

リンクにJavaScript関数を設定 <a href = "javascript:関数名()" >ラベル</a>

HTMLタグのオブジェクトを取得する方法 document.getElementById ( "[idの値]" ) ;

タグに記載される文字列を保管するプロパティ タグのオブジェクト.textContent