jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

jQuery의 .children()은 선택한 요소의 바로 아래 자식 요소만 담은 새 jQuery 객체를 반환합니다. .children(".hot")처럼 선택자를 넣으면 그 자식들 중 조건에 맞는 것만 남깁니다. 더 깊은 자손은 .find(), 텍스트·주석 노드까지 포함한 직접 자식은 .contents()와 구분합니다.

한 단계 내려가고 자식 후보를 거르기

.children() 공식 문서에서 탐색 범위는 각 시작 요소의 한 단계 아래입니다. 인수가 없으면 태그 종류와 관계없이 모든 직접 자식 요소를 얻습니다. 시작 요소 자신은 포함하지 않고, 자식 요소 안의 손자 요소까지 자동으로 내려가지도 않습니다.

인수는 이미 찾은 자식 후보에 적용할 선택 조건입니다. .children(".hot")를 썼다고 hot 클래스가 나올 때까지 여러 단계를 탐색하는 것은 아닙니다. 시작 집합에 부모가 여러 개이면 각 부모의 직접 자식을 모으므로, 특정 카드만 다룰 때는 시작 선택 범위를 먼저 제한합니다.

중첩 카드로 실행하는 전체 예제

아래 전체 코드를 UTF-8의 children-demo.html로 저장하고 브라우저에서 엽니다. 별도 설치는 없으며 공식 jQuery 파일을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 불러올 인터넷 연결이 필요합니다. 코드는 4.0.0을 사용하고, 선택·필터·추가·초기화와 비교 코드는 3.7.1과 4.0.0에서 실행해 확인했습니다.

card 바로 아래에는 p인 title, div인 body, button인 action 세 요소가 있습니다. nested는 body 안에 있어 card의 손자 요소입니다. Intro text와 주석도 넣어 요소와 노드를 구분할 수 있게 했습니다. card 자체의 hot 클래스도 자식 선택에는 포함되지 않습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direct children and deeper descendants</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #card { border: 2px solid #aaa; padding: 16px; max-width: 600px; }
    #card > * { display: block; padding: 8px; margin: 8px 0; border: 1px solid #ddd; }
    #card .marked { outline: 3px solid #ba6900; background: #fff5d6; }
    button { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Direct children and deeper descendants</h1>
  <div id="card" class="hot">
    Intro text
    <!-- A comment is not an element. -->
    <p id="title" class="hot">Direct paragraph</p>
    <div id="body"><p id="nested" class="hot">Nested paragraph</p></div>
    <button type="button" id="action">Direct button</button>
  </div>
  <button type="button" id="all">All direct children</button>
  <button type="button" id="hot">Direct .hot children</button>
  <button type="button" id="deep">All .hot descendants</button>
  <button type="button" id="add">Add direct .hot paragraph</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#card").find("*").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      function direct() {
        show($("#card").children());
      }
      $("#all").on("click", direct);
      $("#hot").on("click", () => show($("#card").children(".hot")));
      $("#deep").on("click", () => show($("#card").find(".hot")));
      $("#add").on("click", function () {
        if (!$("#extra").length) {
          $("<p>").attr("id", "extra").addClass("hot").text("Added paragraph").appendTo("#card");
        }
        direct();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        direct();
      });
      direct();
    });
  </script>
</body>
</html>

처음에는 직접 자식 세 요소의 테두리가 강조되고 결과는 다음과 같습니다. body 전체가 강조되어 안쪽 내용도 배경 위에 보이지만, 선택된 요소는 body이며 nested가 따로 선택된 것은 아닙니다.

title, body, action | 3

1. All direct children은 title, body, action | 3을 표시합니다.
2. Direct .hot children은 직접 자식 중 hot인 title | 1만 남깁니다.
3. All .hot descendants는 .find()로 깊이 내려가 title, nested | 2를 표시합니다. hot인 card 자신은 여전히 포함하지 않습니다.
4. Add direct .hot paragraph는 card에 p를 추가하고 직접 자식을 다시 선택하여 title, body, action, extra | 4를 표시합니다. 다시 눌러도 extra ID를 확인하여 중복을 만들지 않습니다.
5. 추가 후 Direct .hot children을 누르면 title, extra | 2입니다. Reset은 extra만 제거하고 원래의 세 직접 자식 선택으로 돌아갑니다.

show는 이전 자손의 marked 클래스를 모두 지운 다음 현재 결과만 강조합니다. 따라서 직접 자식 선택과 깊은 자손 선택을 번갈아 눌러도 이전 강조가 남지 않습니다. 원래의 내용과 버튼은 초기화 과정에서 교체하지 않습니다.

.find()·.contents()와 결과 비교하기

Reset 후 개발자 도구의 Console에 아래 부분 코드를 실행합니다. 각 줄은 선택한 요소의 ID를 출력합니다.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#card").children()));
console.log(ids($("#card").children(".hot")));
console.log(ids($("#card").find(".hot")));

title, body, action
title
title, nested

.find()는 여러 단계 아래의 자손을 찾고, .children()은 한 단계만 이동합니다. 원하는 깊이가 정확히 두 단계이면 $("#card").children().children(".hot")처럼 단계별로 이동할 수 있습니다. 이 예제에서는 nested만 얻지만, 중간 래퍼가 추가되면 결과도 달라집니다.

.contents()는 텍스트와 주석까지 포함한 직접 자식 노드를 얻을 때 사용합니다. 노드는 DOM(Document Object Model, 문서 객체 모델)의 구성 단위이며 요소 노드뿐 아니라 텍스트·주석 노드도 있습니다. 텍스트나 주석에는 요소의 클래스·스타일 조작이 그대로 적용되는 것이 아니므로, 전체 노드를 요소처럼 다루지 않습니다.

빈 결과·선택 시점·문서 구조 확인하기

부모가 선택되지 않았거나 자식 요소가 없으면 결과는 비어 있습니다. action 안에는 글자만 있으므로 .children()은 빈 집합이며, 그 텍스트가 사라졌다는 뜻은 아닙니다. 기대한 요소가 빠지면 중간 div나 ul 같은 래퍼가 있는지, 클래스가 부모·자식·손자 중 어디에 붙었는지 확인합니다.

선택 결과는 자동 갱신되지 않습니다. 추가 전의 세 자식을 저장한 집합은 p를 추가해도 길이가 그대로이므로, 현재 자식이 필요하면 direct처럼 다시 조회합니다. 예제가 반응하지 않으면 Network의 jQuery 로딩과 Console 오류를 확인하고, 비동기 삽입을 다룰 때는 삽입 완료 후 선택합니다.