IORI online School

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

【JavaScript 練習講座】HTMLタグの子要素の取得と変更

[JavaScript 練習講座]HTMLタグの子要素の取得と変更

この講座では、タグの子要素に注目する。 「子要素操作の学習」とも言える。 主に、特定の子要素のスタイルを変更するサンプルプログラムを見る。 ただ、注意点がある。 ここでご紹介するプログラムは「一例」である。 JavaScriptでは、ある動作をするプログラムを記述する時、何通りもの書き方がある。 ここで紹介するプログラム以外にも、 別の書き方で同じ動作をするプログラムを書く事ができる。 ご注意下さい。

子要素を取得して文字列を変更する

まず、特定の子要素の文字列を変更するサンプルプログラムを見る。

001<html><head>
002<script>
003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //[ol]の[li]を取得する
009  const li = ol.children [ 1 ] ;
010  
011  //文字を変更する
012  li.textContent = "iori" ;
013}
014</script>
015</head>
016<body>
017  <a href="javascript:clickLink()" >Click</a>
018  <ol id = "test" >
019    <li>Hello 1</li>
020    <li>Hello 2</li>
021    <li>Hello 3</li>
022  </ol>
023</body>
024</html>
Click
1. Hello 1
2. Hello 2
3. Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click
1. Hello 1
2. iori
3. Hello 3

Clickリンクをクリックすると、2つ目の文字列が「iori」と表示する。
全体の処理を解説する。ClickリンクをクリックするとJavaScriptが実行する。 JavaScriptで二つ目のリストを取得する。 そのリストの文字列を「iori」へ変更する。
では、詳解する。

016<body>
017  <a href="javascript:clickLink()" >Click</a>
018  <ol id = "test" >
019    <li>Hello 1</li>
020    <li>Hello 2</li>
021    <li>Hello 3</li>
022  </ol>
023</body>

HTMLの記述である。olタグに注目する。olタグには「id」属性が設定されている。 「id」属性の値は「test」である。 olタグの直下に子要素のliタグが3つある。 こんかい、Clickリンクをクリックすると、2つ目のliタグの文字列を、 「Hello 2」から「iori」へ変更する。 さて、Clickリンクをクリックしよう。Clickリンクをクリックすると、clickLink()関数が実行する。

003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //[ol]の[li]を取得する
009  const li = ol.children [ 1 ] ;
010  
011  //文字を変更する
012  li.textContent = "iori" ;
013}

6行目で、idがtestのタグを取得して変数olへ代入する。 idの値がtestのタグはolタグである。変数olへolタグが代入される。 9行目で、olタグのchildrenプロパティを利用している。

タグの子要素を取得する タグ.children

子要素を取得する場合、childrenプロパティを利用する。 childrenプロパティの中には、子要素がまとまって入っている。 どのような形で入っているか?配列に近い形である。 配列ではないが配列に近い形である。そのため本講座では配列として扱う。 さて、9行目をもう一度見ると、childrenプロパティの後ろにインデックス「1」をつけている。 これは「children配列の1番目の値(0から数えると2番目の値)」を意味する。 もう一度確認する。childrenは配列(のようなもの)である。

インデックス タグ ラベル
0 liタグ Hello 1
1 liタグ Hello 2
2 liタグ Hello 3

ol.childrenの中身はこのように配列になっている。 こんかい、子要素配列の中からインデックス「1」を取得する。

特定の子要素を取得する タグ.children [ インデックス ] ;

特定の子要素を取得する場合、このようにインデックスを利用する。

009const li = 子要素の配列 [ 1 ] ;

子要素の配列の中の「1」番目の値を取得している。 つまり、「1」番目のliタグが変数liへ代入される。

003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //[ol]の[li]を取得する
009  const li = ol.children [ 1 ] ;
010  
011  //文字を変更する
012  li.textContent = "iori" ;
013}

clickLink()関数の12行目で、liタグのラベルを文字列「iori」へ変更する。

タグのラベルを変更 タグ.textContent = [文字列]

このように、タグのラベルを変更する。 clickLink()関数が実行すると、上から2番目(インデックス「1」)の文字列が「iori」へ変更する。

Click
1. Hello 1
2. iori
3. Hello 3

特定の子要素のスタイルを変更する

練習問題として、特定の子要素の背景色を変更するサンプルプログラムを掲載する。

001<html><head>
002<script>
003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //[ol]の[li]を取得する
009  const li = ol.children [ 1 ] ;
010  
011  //背景色を設定
012  li.style.background = "#0FF";
013}
014</script>
015</head>
016<body>
017  <a href="javascript:clickLink()" >Click</a>
018  <ol id = "test" >
019    <li>Hello 1</li>
020    <li>Hello 2</li>
021    <li>Hello 3</li>
022  </ol>
023</body>
024</html>
Click
1. Hello 1
2. Hello 2
3. Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click 1. Hello 1
2. Hello 2
3. Hello 3

Clickリンクをクリックすると、2番目のliタグの背景色が水色へ変更する。
全体の流れを解説する。Clickリンクをクリックすると、JavaScriptが起動する。 JavaScriptの中でliタグを取得して、背景色を変更する。
では、詳解する。・・・clickLink()関数を見よう。

003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //[ol]の[li]を取得する
009  const li = ol.children [ 1 ] ;
010  
011  //背景色を設定
012  li.style.background = "#0FF";
013}

すでにDOM操作に慣れた頃合だと思うので、撫でるように解説する。 6行目で、olタグを取得して変数olへ代入する。 9行目でolタグのインデックス「1」の子要素を取得して変数liへ代入する。 12行目で、liタグの背景色を変更する。

タグのスタイルを変更 タグ.style.[CSSプロパティ] = [CSSの値] ;

このようにCSSのスタイルを設定できる。 こんかいは、

012  li.style.background = "#0FF";

このように背景色を「#0FF」の値へ変更した。

Click
1. Hello 1
2. Hello 2
3. Hello 3

リンクタグを追加する

リンクタグをliタグの子要素として追加するプログラムを掲載する。

001<html><head>
002<script>
003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //リンクタグを作成
009  const link = document.createElement ( "a" ) ;
010  
011  //href属性を設定
012  link.href = "javascript:alert(100)";
013  
014  //リンクタグのラベル
015  link.textContent = "Hello" ;
016  
017  //[li]タグを作成
018  const li = document.createElement ( "li" ) ;
019  
020  //[li]タグにリンクタグを追加
021  li.appendChild ( link ) ;
022  
023  //[li]タグを[ol]へ追加する
024  ol.appendChild ( li ) ;
025}
026</script>
027</head>
028<body>
029  <a href="javascript:clickLink()" >Click</a>
030  <ol id = "test" >
031    <li>Hello 1</li>
032    <li>Hello 2</li>
033    <li>Hello 3</li>
034  </ol>
035</body>
036</html>
Click
1. Hello 1
2. Hello 2
3. Hello 3

Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。

Click
1. Hello 1
2. Hello 2
3. Hello 3
4. Hello

Clickリンクをクリックすると、「Hello」リンクの新しいリストが追加され、 Helloリンクをクリックすると「100」という文字がダイアログに表示する。
全体の流れを解説する。ClickリンクをクリックするとJavaScriptの関数が実行する。 関数の中でaタグを作成して、href属性にダイアログを表示するように値を設定する。 つぎに、aタグをolタグに追加する。しかし、 aタグをolタグへ単純に追加する事はできない。 まず、liタグを作成する。liタグにaタグを追加する。 そしてliタグをolタグに追加する。これで、aタグが新しいリストとしてolタグに追加される。
詳解する。clickLink()関数を見る。

003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //リンクタグを作成
009  const link = document.createElement ( "a" ) ;
010  
011  //href属性を設定
012  link.href = "javascript:alert(100)";
013  
014  //リンクタグのラベル
015  link.textContent = "Hello" ;
016  
017  //[li]タグを作成
018  const li = document.createElement ( "li" ) ;
019  
020  //[li]タグにリンクタグを追加
021  li.appendChild ( link ) ;
022  
023  //[li]タグを[ol]へ追加する
024  ol.appendChild ( li ) ;
025}

HTMLのClickリンクをクリックすると、clickLink()関数が実行する。 6行目でolタグを取得して変数olへ代入する。 9行目で、createElement()関数を利用して、aタグを作成して変数linkへ代入する。

要素を作成 document.createElement ( [タグ名] )

さて、12行目が気になる。

012  link.href = "javascript:alert(100)";

このプログラムはリンクタグのhref属性に値を追加しているプログラムである。

リンクのhref属性に値を設定 リンクタグ.href = [値] ;

href属性は、リンクがクリックされた時に、どのような動作をするのか設定する属性である。 こんかい、「javascript:alert(100)」という値を設定した。 これで、「リンクをクリックした時、100が記載されたダイアログが表示する動作」となる。

003function clickLink () {
004
005  //[ol]タグを取得
006  const ol = document.getElementById ( "test" ) ;
007  
008  //リンクタグを作成
009  const link = document.createElement ( "a" ) ;
010  
011  //href属性を設定
012  link.href = "javascript:alert(100)";
013  
014  //リンクタグのラベル
015  link.textContent = "Hello" ;
016  
017  //[li]タグを作成
018  const li = document.createElement ( "li" ) ;
019  
020  //[li]タグにリンクタグを追加
021  li.appendChild ( link ) ;
022  
023  //[li]タグを[ol]へ追加する
024  ol.appendChild ( li ) ;
025}

15行目でリンクタグのラベルに、文字列「Hello」を設定する。 変数linkは
<a href="javascript:alert(100)">Hello</a>
このような状態になる。 Helloという文字列が表示して、Helloをクリックすると、「100」が表示する。
さて、18行目でliタグを作成して変数liへ代入する。 21行目でliタグにリンクを追加して、24行目でolタグにliタグを追加する。 Clickリンクをクリックすると、olタグにliタグが追加される。

Click
1. Hello 1
2. Hello 2
3. Hello 3
4. Hello

まとめ

タグの子要素を取得する タグ.children

特定の子要素を取得する タグ.children [ インデックス ] ;

リンクのhref属性に値を設定 リンクタグ.href = [値] ;