【jQuery】contents()で全ての子要素/テキスト要素を取得する!

全ての子要素/テキスト要素を取得するにはcontents()を使用します。

contents()とは、全ての子要素/テキスト要素を取得すメソッドであり、指定した要素の中にある要素やテキストをや、iframe内の要素やテキスト要素などを取得することができます。

また、指定した要素の子要素を取得するメソッドとして、children()があるかと思いますが、contents()メソッドとchildren()メソッドの違いとして「指定した要素のテキストノードを取得するかしないか」という違いがありますので、もし詳しく知りたい場合はこの記事をご覧ください。

今回は、jQueryのcontents()を使って全ての子要素/テキスト要素を取得する方法について以下の内容で解説していきます。

⚫︎ 全ての子要素を取得する場合
⚫︎ 全てのテキスト要素を取得する場合

⚫︎ iframeの子要素/テキスト要素を取得する方法

⚫︎ contents()とchildren()の違い

ハルトさん

今回はjQueryのcontents()メソッドで全ての子要素/テキスト要素を取得する方法について説明していきます。

さとみさん

はい!
お願いします!

contents()とは

contents()とは、指定した要素のテキストノードも含めた全子要素を取得するメソッドとなります。

contents()の書き方

contents()メソッドの構文は下記となります。

comntens()メソッドにはパラメータはありません。
セレクタの後にcontents()メソッドを呼び出すことでセレクタの子要素やテキスト要素を全て取得することができます。

全ての子要素/テキスト要素を取得するサンプルコード

全ての子要素/テキスト要素を取得するサンプルコードを紹介していきます。

全ての子要素を取得する場合

全ての子要素を取得する場合を見てみます。

sample.html

index.js

実行結果

contents()メソッドによって、指定した要素の子要素を取得しています。
その為、ボタンを押すとelementクラスの子要素の背景色が変化します。

全てのテキスト要素を取得する場合

全てのテキスト要素を取得する場合を見てみます。

sample.html

index.js

実行結果

contents()メソッドによって、指定した要素のテキスト要素を取得しています。
その為、ボタンを押すとelementクラスのテキストが表示されます。

iframeの子要素/テキスト要素を取得する方法

contents()メソッドはiframe内の子要素やテキスト要素を取得することもできます。

sample.html

index.js

実行結果

contents()メソッドによって、iframe内の要素やテキスト要素を取得しています。
その為、ボタンを押すとiframe内の要素が表示されたり、iframe内の背景色が変更されます。

さとみさん

contents()メソッドでiframe内の要素も取得することができるんですね!

ハルトさん

そうですね!
contents()メソッドはセレクタにiframeを指定することで、埋め込まれたiframe内の要素も取得することができます。

contents()とchildren()の違い

指定した要素の子要素を取得するメソッドはcontents()メソッドの他にもchildren()メソッドがあるかと思いますが、この二つのメソッドには違いがあります。

それは、「指定した要素のテキストノードを取得するかしないか」です。

contents()メソッドは指定した要素のテキストノードまで取得しますがchildren()メソッドは指定した要素のテキストノードは取得しません。

jQueryのchildren()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

contents()とchildren()は確かに挙動が似てますね。
「指定した要素のテキストノードを取得するかしないか」ってどういうことですか?

ハルトさん

言葉ではわかりにくいかと思いますので、まずはサンプルコードを見て見ましょう。

sample.html

index.js

実行結果

contents()メソッドの場合はelementクラスの直下にあるテキストノードを取得していますが、children()メソッドではelementクラスの直下にあるテキストノードを取得することができません。

さとみさん

確かに、contents()メソッドはelementクラスの直下にある「ここのテキストノードを取得できるかどうか」を取得してますけど、children()メソッドでは取得できていませんね。

ハルトさん

そうですよね。
contents()メソッドは指定した要素の中身を取得するメソッドですので、親要素のタグで囲まれたものが対象となります。
しかし、children()メソッドは措定した要素の子要素を取得するメソッドですので子要素のタグで囲まれたものが対象となります。
したがって、contents()は子要素はもちろん、テキストノードも取得しますが、children()は子要素しか取得しません。

今回のポイント

contents()で全ての子要素/テキスト要素を取得

⚫︎ 全ての子要素/テキスト要素を取得するにはjQueryのcontents()メソッドを使用する

⚫︎ contents()メソッドを使用すると、指定した要素の中身全て(要素やテキスト)が対象となる

⚫︎ contents()メソッドはiframe内の要素やテキストを取得することができる

⚫︎ contents()メソッドとchildren()メソッドの違いは指定した要素のテキストノードを取得するかしないかである
(contents()では指定した要素のテキストノードを取得するが、children()では取得しない)

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報