はじめまして！
この度、unitopiさんでライターをさせて頂くことになりました、ケインでございます。

初回は、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得」について、サンプルコードを使いながらお話させていただきます！

※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！

なぜ子要素や親要素を取得？

例えば「ボタンを押したら、li要素を増やしたい」「ボタンを押したらul要素以下を全部非表示にしたい」など、JavaScriptを書いているとHTML要素に何かをしたいということが頻繁に起きます。

そんな時に、いちいち全部の要素をgetElementById()だったりgetElementsByClassName()を使って取得していたら、面倒ですし、JavaScriptのコードも面長になったりして、いいことがありません。

だからこそ、子要素や親要素を取得するという方法も覚えておく必要性があるわけですね〜

【JavaScriptの場合】※下記サンプルコードを使用し説明

下記のサンプルを使い、ulの子要素を取得したい場合を例にしてお話していきます！

See the Pen 子要素取得（JavaScript版） by Tatsuya Kosuge (@castero) on CodePen.
11535

①childNodes（※記載方法：element.childNodes）
→テキストや改行も取得される

childNodesそして、この後説明するchildren両方に共通していますが、この命令をすることによって、「子要素のまとまり」を取得することになります。

上記のコードの「JS」タブを見て頂きたいのですが、getElementById()を使ってul要素を取得し、ul要素の子要素にあたるli要素をまとめて取得するのに、childNodesを使用しています。

上記サンプルコードをブラウザの検証ツール（※今回はGoogleChromeを使用）でみた結果

※右クリック→要素を検証、で表示可能。

②children（記載方法：element.children）
→テキストや改行は取得せず、タグ要素のみを取得

childrenを使用した場合、改行やテキストは取得されず、純粋に「htmlのタグ（要素）」が取得されます。

childrenを使ってulの子要素を取得し、ブラウザの検証ツールで表示した結果

といったように、「li」タグのみが子要素として取得されているのがわかります。改行やテキストが取得されていないのがchildNodesとの違いですね！

なお、上記いずれもですが、個別の要素を取得した場合は、element[0]のように記載すると取得出来ます。
（※サンプルコードにも記載しましたので、見てみてくださいね！）

【jQueryの場合】※下記のサンプルコードを使用し説明

私がよく閲覧するサイト

• yahoo


• Google


• facebook


• twitter

See the Pen ramzyM by Tatsuya Kosuge (@castero) on CodePen.
11535

③children()（記載方法：$(“element”).children()）
→子要素（改行やテキスト等は除く）を取得

jQueryのchildren()を使ってulの子要素を取得し、ブラウザの検証ツールで表示した結果

例えば子要素の中にp要素やspan要素といった複数の種類の要素があり、p要素だけ取得したい場合は、element.children("p")とすることでp要素のみを取得することができます。
このあたりは、ぜひご自身でやってみてくださいね！

④find()（記載方法：$(“element”).find()）
→子要素だけでなく孫要素も取得対象になる

find()は、子要素だけでなく、孫要素も取得対象になります。
（※サンプルでいうとa要素も取得対象にできる）

jQueryのfind()を使ってa要素を取得し、ブラウザの検証ツールに表示

children()の時にも説明したように（ ）の中に取得したい要素名を入れることによって、取得内容の絞り込みも可能になります。

⑤contents()（記載方法：$(“element”).contents()）
→テキストなど含めて子要素を取得

contents()は、children()と似た感じですが、JavaScriptのchildNodesと同じようにテキスト等も含めて取得します

jQueryのcontents()を使ってli要素を取得し、ブラウザの検証ツールに表示

まとめ

いかがでしたか？

なにより、思ったよりも内容がが長くなりまして、「親要素の取得」の説明まで入れることができませんでしたので、こちらは次回の投稿でお話いたします！なかなかコンパクトにまとめるのも難しいですね！（笑）

ということで、今後ともどうぞよろしくお願い致します！

Author Profile

KosugeTatsuya

Latest entries

• 2015.06.18コーディングを効率化する導入必至のツール【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！
• 2015.04.21読んでみた【書評】「10年使えるSEOの基本」を買ってみた
• 2015.03.02CSSマスター【CSS】CSSプロパティの記述順について考えてみた
• 2015.02.18Javascriptを学ぼう【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③