DOM 프로퍼티(Property)의 의미와 역할

DOM 프로퍼티(Property)의 의미와 역할

DOM에서 "프로퍼티(property)"는 JavaScript 객체로서의 DOM 요소가 가지는 속성들을 의미합니다. 이 개념을 여러 층위에서 자세히 설명드리겠습니다.

1. 프로퍼티의 기본 개념

DOM 프로퍼티는:

• DOM 요소를 JavaScript 객체로 표현할 때 그 객체가 가지는 속성(attribute)
• 객체 지향 프로그래밍에서의 객체 속성과 동일한 개념
• 점 표기법(object.property)으로 접근 가능

// div 요소의 프로퍼티 접근 예시
const div = document.querySelector('div');
console.log(div.id); // 'id' 프로퍼티
console.log(div.className); // 'class' 프로퍼티

2. 프로퍼티 vs 어트리뷰트(Attribute)

주요 차이점

특성	프로퍼티 (Property)	어트리뷰트 (Attribute)
위치	JavaScript 객체 내부	HTML 태그 안에 명시
타입	JavaScript 타입 (boolean, number 등)	항상 문자열
동기화	특별한 경우만 연동	대부분 별개로 동작
대소문자	대소문자 구분 (camelCase)	대소문자 무시
예시	element.hidden = true	<div hidden="true">

변환 예시

<input id="user" type="text" value="초기값" data-custom="123">

const input = document.getElementById('user');

// 어트리뷰트 → 프로퍼티 자동 변환
console.log(input.type); // "text" (문자열)
console.log(input.id); // "user" (문자열)

// 특수한 프로퍼티
console.log(input.value); // "초기값" (동기화되지만 별개로 관리됨)
input.value = "변경값"; // 프로퍼티 변경
console.log(input.getAttribute('value')); // "초기값" (어트리뷰트는 그대로)

// 데이터 프로퍼티
console.log(input.dataset.custom); // "123" (data-* 어트리뷰트 특수 변환)

3. DOM 프로퍼티의 종류

1. 표준 HTML 속성 프로퍼티

• HTML 표준 속성들이 자동으로 프로퍼티로 변환
• id, className, href, src 등

const link = document.querySelector('a');
console.log(link.href); // 전체 URL 문자열
console.log(link.title); // 툴팁 텍스트

2. 전역 프로퍼티

• 모든 요소가 공통으로 가지는 프로퍼티
• hidden, tabIndex, style 등

const div = document.querySelector('div');
div.hidden = true; // 요소 숨기기
div.tabIndex = 2; // 탭 순서 지정

3. 요소 종속 프로퍼티

• 특정 요소 타입에만 존재하는 프로퍼티
• <input>: value, checked
• <img>: naturalWidth, complete

const checkbox = document.querySelector('input[type="checkbox"]');
console.log(checkbox.checked); // boolean 값

4. 메서드 형태의 프로퍼티

• 함수로 실행되는 프로퍼티
• focus(), blur(), click()

const btn = document.querySelector('button');
btn.click(); // 프로그래매틱 클릭 실행

4. 중요한 DOM 프로퍼티 예시

1. style 프로퍼티

element.style.backgroundColor = 'blue'; // camelCase 사용
// CSS: background-color → JavaScript: backgroundColor

2. classList 프로퍼티

div.classList.add('active');
div.classList.remove('inactive');
div.classList.toggle('highlight');

3. dataset 프로퍼티

<div data-user-id="123" data-role="admin"></div>

console.log(div.dataset.userId); // "123"
console.log(div.dataset.role); // "admin"

4. children vs childNodes

// 요소 노드만 포함 (HTMLCollection)
console.log(element.children); 

// 모든 노드 포함 (NodeList: 텍스트, 주석 등)
console.log(element.childNodes); 

5. 프로퍼티의 동적 특성

DOM 프로퍼티는 실시간으로 반영되는 동적 특성을 가집니다:

const img = document.querySelector('img');

// 프로퍼티 변경 시 즉시 반영
img.src = 'new-image.jpg'; // 이미지 즉시 변경

// 읽기 전용 프로퍼티도 존재
console.log(img.naturalWidth); // 로드된 이미지 실제 너비

6. 프로토타입 체인과 프로퍼티

모든 DOM 요소는 프로토타입 체인을 통해 프로퍼티를 상속받습니다:

const input = document.querySelector('input');

// 프로토타입 체인 확인
console.log(
  input instanceof HTMLInputElement, // true
  input instanceof HTMLElement,     // true
  input instanceof Element,         // true
  input instanceof Node             // true
);

7. 사용자 정의 프로퍼티 추가

DOM 요소에 사용자 정의 프로퍼티 추가 가능 (단, HTML 어트리뷰트와 혼동 주의):

const div = document.querySelector('div');

// 사용자 정의 프로퍼티
div.myCustomProp = { data: 123 };
console.log(div.myCustomProp); // {data: 123}

// 하지만 이 방법보다는 dataset 권장
div.dataset.customInfo = JSON.stringify({ data: 123 });

DOM 프로퍼티는 JavaScript가 HTML과 상호작용하는 핵심 매커니즘으로, 웹 개발에서 정확한 이해가 필수적입니다. 이 설명이 DOM 프로퍼티의 본질을 이해하는 데 도움이 되었기를 바랍니다!