【JavaScript】childNodesで子要素にアクセスする!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年11月16日に投稿されました。)

JavaScriptでセレクタの子要素にアクセスするにはchildNodesを使用します。

childNodesとは対象ノードの子ノードにアクセスするプロパティとなります。

そのため、セレクタに対して使用することで指定したセレクタの子要素を取得することができるようになります。

しかし、こちらのプロパティはノードを取得することから、要素だけでなくテキストも取得するのでインデックス指定には注意が必要です。

子要素が特定できなくても、親要素さえ取得できれば子要素を取得できるため、もし対象要素の子要素にアクセス場合はchildNodesを使用しましょう。

今回はJavaScriptのchildNodesで子要素にアクセスする方法について紹介していきます。

この記事はこんな方におすすめ

セレクタの子要素を取得したい場合

セレクタの子要素を操作したい場合

childNodesとは

childNodesとは、対象ノードの子ノードにアクセスするプロパティとなります。

ノードにアクセスできることから、対象要素の子要素を取得することができるようになります。

また、こちらのプロパティはノードを取得するため、子要素だけでなくテキストも取得するようになります。

childNodesの書き方

childNodesの書き方は下記のようになります。

セレクタの後ろにchildNodesと追記し、インデックスを指定することで対象の要素の子要素にアクセスすることができます。

childNodesで子要素にアクセスするサンプルコード

childNodesで子要素にアクセスするサンプルコードをご紹介します。

今回は下記の3パターンでchildNodesを使用します。

  1. 子要素が存在する場合
  2. 子要素が存在しない場合
  3. インデックスが子要素の数よりも大きい場合

子要素が存在する場合

子要素が存在する場合にchildNodesを使用すると、セレクタの子ノードにアクセスすることができます。

そのため、セレクタの子要素にアクセスすることができます。

● index.html

● style.css

● main.js

実行結果

子要素が存在する場合にchildNodesで子要素にアクセスした結果

childNodesでセレクタの子要素にアクセスしています。

そのため、取得ボタンをクリックすると「obj」クラスの子要素である2番目のHTML要素が表示されています。

子要素が存在しない場合

子要素が存在しない場合にchildNodesを使用すると、セレクタの子要素にアクセスすることができず、「undefined」が返されます。

● index.html

● style.css

● main.js

実行結果

子要素が存在しない場合にchildNodesで子要素にアクセスした結果

childNodesでセレクタの子要素にアクセスしています。

今回はセレクタの子要素が存在しないため、取得ボタンをクリックすると「undefined」が表示されています。

インデックスが子要素の数よりも大きい場合

インデックスが子要素の数よりも大きい場合にchildNodesを使用すると、アクセスはできますが、子要素の数よりオーバーするため「undifined」が返されます。

● index.html

● style.css

● main.js

実行結果

インデックスが子要素の数よりも大きい場合にchildNodesで子要素にアクセスした結果

childNodesでセレクタの子要素にアクセスしています。

今回はインデックスが子ノード数をオーバーしているため、取得ボタンをクリックすると「undefined」が表示されています。

childNodesでインデックスを指定しないで子要素にアクセスする場合

childNodesでインデックスを指定しないで子要素にアクセスすると、全ての子要素がオブジェクトで返ってくるようになります。

また、childNodesは子ノードを返すため、要素だけでなくテキストなども含むノードがオブジェクトで返されるようになります。

● index.html

● style.css

● main.js

実行結果

childNodesでインデックスを指定しないで子要素にアクセスした結果

childNodesでインデックスを指定しないでセレクタの子要素にアクセスしています。

そのため、取得ボタンをクリックするとセレクタの子要素だけでなくテキストも込みでオブジェクトとして表示されています。

childNodesで子要素のノードのみに限定してアクセスする場合

childNodesで子要素のノードのみに限定してアクセスするにはnodeNameと組み合わせて使用します。

nodeNameとはノードの名前を取得するプロパティとなります。

そのため、繰り返し処理中にnodeNameでノード名を条件として指定することで子要素のノードのみに限定してアクセスすることができます。

● style.css

● main.js

実行結果

childNodesで子要素のノードのみに限定してアクセスした結果

childNodesで子要素のノードのみに限定してアクセスしています。

そのため、「追加」ボタンをクリックすると「obj」クラスの子要素である「objの子要素-1」から「objのこ子要素-5」までが表示されています。

childNodesを使用した実際のケース

childNodesを使用した実際のケースについてご紹介します。

例えば、入力フォームで入力した値を画面表示するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

childNodesで入力フォームで入力した値を画面表示するコードを作成した結果

childNodesで入力フォームの入力値を表示しています。

今回は「objG」の要素をセレクタとして取得し、childNodesでその中にあるinput要素の子要素のみにアクセスしています。

そして、表示する画面のそれぞれの項目の値にchildNodesで取得したinput要素の値を格納しています。

そのため「確定」ボタンをクリックすると、入力フォームで入力した値が画面に確定して表示されています。

jQueryで子要素にアクセスする場合

jQueryで子要素にアクセスするにはchildren()を使用します。

children()とは対象の要素の子要素を全て取得するメソッドになります。

そのため、children()を使用することで、子要素にアクセスすることが可能になります。

● index.html

● style.css

● main.js

実行結果

jQueryのchildren()で子要素にアクセスした結果

children()で子要素にアクセスしています。

そのため、「追加」ボタンをクリックすると「preTo」と書かれた要素が対象要素の上に表示されています。

また、ソースコードを見ると「obj-preto」クラス要素が「obj」クラス要素の先頭に追加されています。

子要素にアクセスする他の方法

JavaScriptで子要素にアクセスするにはchildNodes以外にも存在します。

そのため、ここでは子要素にアクセスする他の方法についてご紹介します。

最初の子要素をにアクセスする場合

最初の子要素をにアクセスするにはfirstElementChildを使用します。

firstElementChildとは対象セレクタの最初の子ノードにアクセスすることができるプロパティになります。

そのため、firstElementChildを使用することで、最初の子要素にアクセスすることができようになります。

● index.html

● style.css

● main.js

実行結果

firstElementChildで最初の子要素にアクセスした結果

firstElementChildで最初の子要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj」クラスの最初の子要素である「objの子要素-1」が表示されています。

最後の子要素にアクセスする場合

最後の子要素をにアクセスするにはlastElementChildを使用します。

lastElementChildとは対象セレクタの最後の子ノードにアクセスすることができるプロパティになります。

そのため、アクセスしたセレクタに対してlastElementChildを使用することで、セレクタの最後の子要素を取得することができます。

● index.html

● style.css

● main.js

実行結果

lastElementChildで最後の子要素にアクセスした結果

lastElementChildで最後の子要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj」クラスの最後の子要素である「objの子要素-3」が表示されています。

親要素にアクセスする場合

親要素にアクセスするにはparentNodeを使用します。

parentNodeとは対象セレクタの親ノードにアクセスすることができるプロパティになります。

そのため、アクセスしたセレクタにparentNodeを使用することで、セレクタの親要素を取得することができます。

● index.html

● style.css

● main.js

実行結果

parentNodeで親要素にアクセスした結果

parentNodeで親要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj」クラスの親要素である「obj-parent」クラスの要素が表示されています。

もし、parentNodeについて詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ childNodesとはセレクタの子ノードにアクセスするプロパティである。

⚫︎ 子要素が存在する場合にchildNodedsを使用すると、アクセスしたセレクタの子要素にアクセスする。

⚫︎ 子要素が存在しない場合にchildNodedsを使用すると、「undifined」を返す。

⚫︎ セレクタの子ノード数よりも大きいインデックスを指定する場合にchildNodedsを使用すると、「undifined」を返す。

⚫︎ childNodesでインデックスを指定しないで子要素にアクセスすると、全ての子ノードをオブジェクトで返す。
(子要素だけでなくテキストも含まれる)

⚫︎ jQueryで子要素にアクセスするにはchildren()を使用する。

⚫︎ 最初の子要素をにアクセスするにはfirstChildを使用する。

⚫︎ 最後の子要素をにアクセスするにはlastChildを使用する。

⚫︎ 親要素にアクセスするにはparentNodeを使用する。