childrenメソッド

childrenメソッドは要素の直接の子要素のみを返し、 テキストノードは返しません。テキストやコメントを含む すべての子要素を取得するには、 contents メソッドを使用してください。

構文

直接の子要素の取得:

javascript.children();

指定されたセレクタで子要素をフィルタリングすることもできます:

javascript.children(セレクタ);

例

divタグの すべての直接の子要素を見つけ、 appendメソッドを使って 末尾に'!'を追加してみましょう:

html<div>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
</div>
javascript$('div').children().append('!');

HTMLコードは次のようになります:

html<div>
  <p>テキスト!</p>
  <p>テキスト!</p>
  <p>テキスト!</p>
</div>

例

次に、クラスwwwを持つすべての直接の子要素を見つけてみましょう:

html<div>
  <p class="www">テキスト</p>
  <p class="www">テキスト</p>
  <p>テキスト</p>
</div>
javascript$('div').children('.www').append('!');

HTMLコードは次のようになります:

html<div>
  <p class="www">テキスト!</p>
  <p class="www">テキスト!</p>
  <p>テキスト</p>
</div>

関連項目

  • 要素の子要素とその内部のテキストを取得できるメソッド contents
  • 要素の親を取得できるメソッド parent
  • 要素のすべての親を取得できるメソッド parents
  • 子要素の擬似配列を保持するJavaScriptプロパティ children