[JavaScript]DOM 프로퍼티와 HTML 애트리뷰트의 차이점

DOM 프로퍼티와 HTML 애트리뷰트의 차이점

DOM의 프로퍼티(Property)와 HTML의 애트리뷰트(Attribute)는 한글로 번역하면 "속성"이라는 뜻이므로 이 둘을 동일한 의미로 해석할 수 있습니다. 하지만, DOM 프로퍼티와 HTML 애트리뷰트는 엄연히 다른 개념이며 이번 포스팅은 이 둘의 차이점을 설명합니다.

---

애트리뷰트(Attribute)

특징 1. 애트리뷰트는 HTML에 의해 정의됩니다.

<div id="content" name="content-name" custom="custom"/>

<div> 요소는 값이 "content"인 id 애트리뷰트, 값이 "content-name"인 name 애트리뷰트, 값이 "custom"인 custom 애트리뷰트를 가집니다.

 

특징 2. 애트리뷰트의 타입은 문자열(string)입니다.

위 예제에서 사용된 <div> 요소의 id 애트리뷰트의 타입을 typeof 연산자로 확인하면 string을 반환합니다.

const content = document.getElementById("content");

console.log(typeof content.getAttribute("id")); // string
console.log(typeof content["id"]); // string

---

프로퍼티(Property)

1. DOM은 JavaScript 객체입니다.

<div id="content" name="content-name" custom="custom"/>

const content = document.getElementById("content");

content.newProperty = 100;
console.log(content.newProperty); // 100
console.log(typeof content.newProperty); // number

프로퍼티(Property)는 DOM에 존재하며, DOM은 JavaScript의 객체입니다. 따라서, JavaScript에서 일반 객체를 다루는 것처럼 DOM에 프로퍼티를 추가하거나 가져올 수 있으며 프로퍼티의 타입은 모든 타입이 될 수 있습니다.

 

2. 사용자 정의 프로퍼티가 아닌 경우 점 표기법 및 대괄호 표기법으로 가져올 수 없습니다.

<div id="content" name="content-name" custom="custom"/>

const content = document.getElementById("content");

console.log(content.id); // content
console.log(content.name); // undefined
console.log(content.custom); // undefined

console.log(content["id"]); // content
console.log(content["name"]); // undefined
console.log(content["custom"]); // undefined

id, name, class 등과 같은 프로퍼티는 점 표기법 및 대괄호 표기법으로 가져올 수 있지만, custom과 같은 사용자 정의 프로퍼티는 가져올 수 없습니다.

 

참고로 name 프로퍼티는 <div> 태그에서 기본 애트리뷰트가 아닌 사용자 정의 애트리뷰트로 간주하므로 위 예제에서 undefined를 반환합니다. class는 JavaScript에서 예약어이므로 class가 아닌 className을 사용합니다.

 

3. 기본 값이 존재하는 애트리뷰트는 값을 변경할 수 없습니다.

<input id="content" value="test" />

const content = document.getElementById("content");

content.value = "hello";
console.log(content.getAttribute("value")); // test

<input> 태그의 value 애트리뷰트에 값이 존재하므로 JavaScript에서 값을 변경할 수 없습니다.

---

그 외 차이점

1. HTML 애트리뷰트는 대소문자를 구분하지 않지만, DOM 프로퍼티는 대소문자를 구분합니다.
2. HTML 애트리뷰트의 데이터 타입은 항상 문자열이지만, DOM 프로퍼티는 모든 데이터 타입을 가질 수 있습니다.
3. "data-"로 시작하는 모든 HTML 애트리뷰트는 DOM 프로퍼티의 "dataset"과 매핑됩니다.

<input id="content" data-value="test" />

const content = document.getElementById("content");

console.log(content.dataset.value); // test