Getter·Setter 메소드

제이쿼리 Getter·Setter 메소드는 $()로 선택한 요소의 값을 읽거나(Getter) 설정(Setter) 하는 API입니다. 인수를 전달하지 않으면 Getter, 전달하면 Setter로 동작하여 DOM 제어를 한층 간결하게 해 줍니다.

예시 — Getter:

const titleHtml = $("h1").html(); // <h1>의 HTML을 읽음

Setter:

$("#text").html("새로운 텍스트"); // 콘텐츠 변경

---

주요 Getter·Setter 메소드 한눈에 보기

메소드	Getter 기능 (인수 없음)	Setter 기능 (인수 있음)
.html()	HTML 콘텐츠 반환	HTML 콘텐츠 설정
.text()	텍스트 콘텐츠 반환	텍스트 콘텐츠 설정
.attr()	속성값 반환	속성값 설정
.val()	폼 값 반환	폼 값 설정
.width() / .height()	요소의 픽셀 너비·높이 반환	픽셀 값으로 크기 설정
.position()	위치(top·left) 객체 반환	(읽기 전용)

Tip: Setter는 모든 선택된 요소에 값을 적용하고 jQuery 객체를 그대로 반환하므로 체이닝이 가능합니다.

---

메소드 체이닝과 .end() 활용

체이닝(Chaining)은 여러 메소드를 연속 호출해 코드를 짧게 만드는 제이쿼리만의 장점입니다.

$("#list")
  .find("li")            // <li> 모두 선택
  .eq(1).text("두 번째") // 2번째 항목 수정
  .end()                 // 이전 선택 상태(<li> 전체)로 복귀
  .eq(2).text("세 번째"); // 3번째 항목 수정

• .end() : 체인에서 한 단계 이전 선택 상태로 돌아갑니다.
• 성능 : 같은 DOM 집합을 재사용하므로 불필요한 탐색을 줄입니다.

---

실전 예제: 상황별 Getter·Setter

1) 콘텐츠 제어

// HTML 교체
$("h1").html("<span class='highlight'>뉴 타이틀</span>");

// 단순 텍스트 교체
$("h1").text("텍스트만 바꾸기");

2) 속성 제어

// 이미지 src 바꾸기
$("img.hero").attr("src", "/img/new_hero.jpg");

3) 폼 값 제어

// 입력값 읽기
const email = $("#email").val();

// 값 설정 및 disabled
$("#email").val("user@example.com").attr("disabled", true);

4) 크기 제어

javascript
복사편집
$("#box").width(200).height(100); // 동시에 변경

5) Getter·Setter 혼용 UI

$(function () {
  $("#getter").on("click", () => {
    $("#sizeInfo").text(
      `너비: ${$("#box").width()}px / 높이: ${$("#box").height()}px`
    );
  });

  $("#setter").on("click", () => {
    $("#box").width(120).height(60);
    $("#sizeInfo").text("크기가 변경되었습니다!");
  });
});

---

성능 최적화 3가지 팁

1. 캐싱 — 반복 사용하는 선택자는 변수(const $el = $(".item"))에 저장

2. 범위 제한 — $("#container").find(".item")처럼 상위 요소 지정

3. 일괄 Setter — 가능하면 여러 속성 값을 객체로 전달

   $("img").attr({ src: "new.jpg", alt: "새 이미지" });
   

---

질문 정리

Q1. Getter·Setter를 동시에 쓰는 방법은?

A. 값을 콜백 함수로 전달하면 현재 값을 참고해 바로 업데이트할 수 있습니다.

$("#counter").text(function (_, old) {
  return +old + 1; // 숫자 증가
});

Q2. .css()도 Getter·Setter인가요?

A. 맞습니다. .css("color")는 색상을 읽고, .css("color","red")는 설정합니다.

Q3. 크기를 %·em 단위로 설정할 수 있나요?

A. 예, 문자열로 전달하면 됩니다. $("#box").width("50%")

Q4. .attr()과 .prop() 차이는?

A. attr은 HTML 속성을, prop은 DOM 프로퍼티를 다룹니다. 예: checked 상태는 prop("checked")로 제어.

Q5. 체이닝이 길어지면 디버깅이 어렵지 않나요?

A. console.log()에 중간 변수를 출력하거나 .end()로 단계별 확인하면 가독성과 디버깅을 모두 잡을 수 있습니다.