children 메서드

children 메서드는 요소의 직접적인 자식 요소만 반환하며 텍스트 노드는 반환하지 않습니다. 텍스트와 주석을 포함한 모든 자식 요소를 반환하려면 contents 메서드를 사용하세요.

구문

직접적인 자식 요소 가져오기:

javascript.children();

지정된 선택자로 자식 요소를 필터링할 수도 있습니다:

javascript.children(selector);

div 태그의 모든 직접적인 자식 요소를 찾고 append 메서드를 사용하여 끝에 '!'를 추가해 봅시다:

html<div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

javascript$('div').children().append('!');

HTML 코드는 다음과 같이 변경됩니다:

html<div>
  <p>text!</p>
  <p>text!</p>
  <p>text!</p>
</div>

이번에는 클래스 www를 가진 모든 직접적인 자식 요소를 찾아봅시다:

html<div>
  <p class="www">text</p>
  <p class="www">text</p>
  <p>text</p>
</div>

javascript$('div').children('.www').append('!');

HTML 코드는 다음과 같이 변경됩니다:

html<div>
  <p class="www">text!</p>
  <p class="www">text!</p>
  <p>text</p>
</div>