this vs $(this), jQuery: 속성 vs 프로퍼티

this, $(this)

자바스크립트에서 this는 실행중인 함수나 이벤트 핸들러 내에 현재 가르키는 객체를 의미한다.

element.addEventListener('click', function() {
  console.log(this);  // 클릭된 요소(HTML 요소, 즉 DOM 요소) 자체를 가리킴
});

그리고 $(this)로 감싸면 DOM 요소를 jQuery 객체로 변환하여 jQuery의 메서드를 활용할 수 있다.
또한, jQuery는 브라우저 간 호환성 문제를 해결하여 여러 브라우저에서도 코드가 원활하게 작동하도록 도와준다.

$('button').click(function() {
  var $this = $(this);  // 클릭된 버튼을 jQuery 객체로 저장
  $this.hide();         // 클릭된 버튼을 숨김 처리(JQuery메소드 활용)
});

DOM이란?

DOM(Document Object Model)은 브라우저가 HTML 문서를 파싱(해석해서 구조화)하여 메모리 내에 생성한 객체들의 트리 구조이다.

속성과 프로퍼티의 차이

jQuery에서는 속성(attribute)과 프로퍼티(property)가 존재한다.

• 속성(attribute): HTML 태그에 직접 명시한 값 <input type="checkbox" id="myCheck" checked="checked">
• 프로퍼티(property): 브라우저가 DOM 객체에 자동으로 생성하는 값 (예: checked, selected, disabled 등)
  이 값들은 JavaScript에서 접근하고 수정할 수 있다.

<input type="checkbox" id="myCheck" checked="checked">

var $checkbox = $("input[type='checkbox']");

// HTML 속성값 가져오기
console.log($checkbox.attr("checked")); // "checked" (HTML에서 설정된 값)

// DOM 프로퍼티 값 가져오기
console.log($checkbox.prop("checked")); // true (사용자가 체크했는지 여부)

위 코드에서 attr()은 HTML에서 명시된 속성을 가져오고, prop()은 DOM 객체에서 생성된 프로퍼티 값을 가져온다.