[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop)

jQuery를 배우는 이유는 딱 한 문장으로 정리됩니다. “원하는 HTML 요소를 선택하고 → 내용을 바꾸고 → 상태를 바꾸기 위해서”입니다.

이번 편은 그중에서도 가장 많이 쓰는 DOM 조작을 깊게 정리합니다. 특히 처음에 많이 헷갈리는 text() vs html(), attr() vs prop() 차이를 확실히 잡고 갑니다.

1. DOM 조작이 뭐예요?

DOM 조작은 쉽게 말하면 화면에 있는 HTML 요소의 “내용/속성/스타일/상태”를 바꾸는 것입니다. 예를 들어 아래는 전부 DOM 조작입니다.

글자 내용 바꾸기 (text, html)
input 값 넣기/읽기 (val)
이미지 src 바꾸기 (attr)
체크박스 체크 상태 확인/변경 (prop)
class 추가해서 CSS 적용하기 (addClass)

2. text() vs html() (가장 많이 헷갈리는 파트)

둘 다 “요소 안의 내용을 바꾸는 함수”지만, 처리 방식이 다릅니다.

✅ text() : 태그를 문자로 취급

text()는 HTML 태그를 해석하지 않고, 그대로 글자로 넣습니다.


$("#box").text("<b>굵게</b>");

✅ html() : 태그를 HTML로 해석

html()은 문자열 안의 태그를 해석해서 진짜 HTML로 넣습니다.


$("#box").html("<b>굵게</b>");

📌 OUTPUT

text()를 사용하면 화면에 <b>굵게</b> 라는 글자가 그대로 보입니다.
html()을 사용하면 화면에 굵게가 실제로 굵게 표시됩니다.

정리: “태그까지 화면에 글자로 보여주고 싶다” → text(), “태그가 적용되게 넣고 싶다” → html()

3. val() : input 값 넣기 / 읽기 (폼에서 필수)

val()은 input, textarea, select 같은 폼 요소의 값을 다룰 때 사용합니다.

📌 값 넣기


$("#name").val("홍길동");

📌 값 읽기


var name = $("#name").val();
alert(name);

📌 OUTPUT

val("홍길동")을 실행하면 input 입력칸에 홍길동이 자동으로 들어갑니다.
val()로 읽어오면 사용자가 입력한 값이 alert로 출력됩니다.

4. attr() vs prop() (깊게 이해하면 실수가 확 줄어요)

이 둘은 둘 다 “값을 가져오고/설정”할 수 있지만, 대상이 다릅니다.

attr() : HTML에 적혀 있는 “속성(attribute)”을 다룸 (예: src, href, id, class, value 등)
prop() : 현재 요소가 가진 “상태(property)”를 다룸 (예: checked, selected, disabled 같은 현재 상태)

특히 체크박스/라디오버튼은 prop()로 다루는 게 안전합니다.

📌 체크박스 예제로 차이 확인


// 체크박스가 처음 HTML에 checked로 되어 있는 상태라고 가정

// HTML에 "checked" 속성이 있는지 확인(처음 상태 기준)
console.log( $("#chk").attr("checked") );  // "checked" 또는 undefined

// 현재 체크 상태(true/false)
console.log( $("#chk").prop("checked") );  // true 또는 false

중요한 포인트는 이겁니다. 사용자가 체크를 해제해도, attr("checked")는 처음 적혀있던 속성이라 그대로 남아있을 수 있습니다. 하지만 prop("checked")는 현재 상태를 정확히 따라갑니다.

✅ 체크 상태 바꾸기 (prop 추천)


$("#chk").prop("checked", true);   // 체크 ON
$("#chk").prop("checked", false);  // 체크 OFF

📌 OUTPUT

prop("checked")는 체크박스가 지금 체크되어 있으면 true, 아니면 false가 나옵니다.
prop("checked", true)를 실행하면 체크박스가 자동으로 체크됩니다.

정리: src/href 같은 “정보”는 attr(), checked/disabled 같은 “상태”는 prop()를 주로 사용합니다.

5. class / css 조작 (화면 변화 만들 때 필수)

스타일을 바꾸는 방법은 크게 두 가지가 있습니다.

addClass/removeClass/toggleClass로 class를 붙여 CSS로 제어 (추천)
css()로 직접 스타일을 변경

📌 class 추가/제거


$("#box").addClass("active");     // 클래스 추가
$("#box").removeClass("active");  // 클래스 제거
$("#box").toggleClass("active");  // 있으면 제거, 없으면 추가

📌 css 직접 변경


$("#box").css("border", "2px solid #333");
$("#box").css({
  "padding": "10px",
  "border-radius": "8px"
});

📌 OUTPUT

addClass("active")를 하면 CSS에서 .active에 설정한 스타일이 적용됩니다.
toggleClass("active")는 버튼을 누를 때마다 스타일이 켜졌다/꺼졌다 하는 효과를 만들 수 있습니다.

6. 전체 예제 (Output 포함) : text/html/val/attr/prop 한 번에

📌 예제 코드


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .box { border:1px solid #ddd; padding:12px; border-radius:8px; margin:10px 0; }
    .active { font-weight:bold; text-decoration:underline; }
  </style>
</head>
<body>

  <div class="box">
    <h4>DOM 조작 테스트</h4>

    <div id="box">여기는 내용이 바뀌는 영역입니다.</div>

    <p>
      <input type="text" id="name" value="초기값" />
      <button id="btnVal">val() 확인</button>
    </p>

    <p>
      <input type="checkbox" id="chk" checked /> 체크박스
      <button id="btnState">checked 상태 확인</button>
      <button id="btnOff">체크 해제</button>
    </p>

    <p>
      <button id="btnText">text()로 넣기</button>
      <button id="btnHtml">html()로 넣기</button>
      <button id="btnClass">toggleClass()</button>
    </p>
  </div>

  <script>
    $(function() {

      $("#btnText").click(function() {
        $("#box").text("<b>굵게</b> 라는 글자가 그대로 보입니다.");
      });

      $("#btnHtml").click(function() {
        $("#box").html("<b>굵게</b>가 실제로 굵게 표시됩니다.");
      });

      $("#btnVal").click(function() {
        alert("현재 input 값: " + $("#name").val());
        $("#name").val("값이 바뀌었습니다!");
      });

      $("#btnState").click(function() {
        alert("현재 checked 상태: " + $("#chk").prop("checked"));
      });

      $("#btnOff").click(function() {
        $("#chk").prop("checked", false);
      });

      $("#btnClass").click(function() {
        $("#box").toggleClass("active");
      });

    });
  </script>

</body>
</html>

📌 OUTPUT

text()로 넣기 버튼을 누르면, #box 영역에 <b>태그</b>가 글자 그대로 보입니다.
html()로 넣기 버튼을 누르면, #box 영역에서 굵게가 실제로 굵게 표시됩니다.
val() 확인 버튼을 누르면, 현재 input 값이 alert로 뜨고, 그 다음 input 값이 “값이 바뀌었습니다!”로 변경됩니다.
checked 상태 확인 버튼을 누르면, 체크박스가 체크되어 있으면 true / 해제되어 있으면 false가 alert로 뜹니다.
체크 해제 버튼을 누르면 체크박스가 강제로 해제됩니다.
toggleClass() 버튼을 누르면 #box 글자가 굵게/밑줄이 켜졌다 꺼졌다 합니다.

7. 핵심 정리

text() : 태그를 문자로 넣음 (안전, 그대로 출력)
html() : 태그를 HTML로 해석해서 넣음
val() : input/textarea/select 값 처리
attr() : src, href 같은 “속성 값”을 다룰 때 유용
prop() : checked/disabled 같은 “현재 상태”는 이걸로 처리
스타일 변경은 class로 제어(addClass/toggleClass)가 가장 깔끔함

다음 편에서는 이벤트(Event) + on() + 이벤트 위임을 깊게 정리해볼게요. 특히 “동적으로 만들어진 버튼 클릭이 왜 안 먹는지” 같은 실전 문제를 해결하는 핵심 파트입니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax) (0)	2026.03.03
[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임) (0)	2026.03.02
[jQuery] 02. 선택자(Selector) 완전 정리 (0)	2026.02.25
[jQuery] 01. jQuery가 뭐예요? (0)	2026.02.16