【JavaScript 練習講座】HTMLタグの子要素の取得と変更
この講座では、タグの子要素に注目する。 「子要素操作の学習」とも言える。 主に、特定の子要素のスタイルを変更するサンプルプログラムを見る。 ただ、注意点がある。 ここでご紹介するプログラムは「一例」である。 JavaScriptでは、ある動作をするプログラムを記述する時、何通りもの書き方がある。 ここで紹介するプログラム以外にも、 別の書き方で同じ動作をするプログラムを書く事ができる。 ご注意下さい。
子要素を取得して文字列を変更する
まず、特定の子要素の文字列を変更するサンプルプログラムを見る。
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>
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
Clickリンクをクリックすると、2つ目の文字列が「iori」と表示する。
全体の処理を解説する。ClickリンクをクリックするとJavaScriptが実行する。
JavaScriptで二つ目のリストを取得する。
そのリストの文字列を「iori」へ変更する。
では、詳解する。
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()関数が実行する。
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 [ インデックス ] ;
特定の子要素を取得する場合、このようにインデックスを利用する。
子要素の配列の中の「1」番目の値を取得している。 つまり、「1」番目のliタグが変数liへ代入される。
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」へ変更する。
特定の子要素のスタイルを変更する
練習問題として、特定の子要素の背景色を変更するサンプルプログラムを掲載する。
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>
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
2. Hello 2
3. Hello 3
Clickリンクをクリックすると、2番目のliタグの背景色が水色へ変更する。
全体の流れを解説する。Clickリンクをクリックすると、JavaScriptが起動する。
JavaScriptの中でliタグを取得して、背景色を変更する。
では、詳解する。・・・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のスタイルを設定できる。 こんかいは、
このように背景色を「#0FF」の値へ変更した。
リンクタグを追加する
リンクタグをliタグの子要素として追加するプログラムを掲載する。
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>
Webブラウザでファイルを開くと、Clickリンクと、Helloの文字列が3つリスト形式で表示する。
Clickリンクをクリックすると、「Hello」リンクの新しいリストが追加され、
Helloリンクをクリックすると「100」という文字がダイアログに表示する。
全体の流れを解説する。ClickリンクをクリックするとJavaScriptの関数が実行する。
関数の中でaタグを作成して、href属性にダイアログを表示するように値を設定する。
つぎに、aタグをolタグに追加する。しかし、
aタグをolタグへ単純に追加する事はできない。
まず、liタグを作成する。liタグにaタグを追加する。
そしてliタグをolタグに追加する。これで、aタグが新しいリストとしてolタグに追加される。
詳解する。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行目が気になる。
このプログラムはリンクタグのhref属性に値を追加しているプログラムである。
リンクのhref属性に値を設定 リンクタグ.href = [値] ;
href属性は、リンクがクリックされた時に、どのような動作をするのか設定する属性である。 こんかい、「javascript:alert(100)」という値を設定した。 これで、「リンクをクリックした時、100が記載されたダイアログが表示する動作」となる。
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タグが追加される。
まとめ
タグの子要素を取得する タグ.children
特定の子要素を取得する タグ.children [ インデックス ] ;
リンクのhref属性に値を設定 リンクタグ.href = [値] ;