[ JS ] JS에서의 Attribute와 Property

 

  자바스크립트에서 attribute와 property는 자주 동일한 의미로 사용되지만 실제론 약간의 차이를 가집니다.

 

  먼저 attribute의 경우 html 문서에 정의된 속성이라 할 수 있으며, 각 속성의 기본값을 제공합니다. 즉, 아래 코드의 input의 경우 type, id, value는 input 요소의 attribute라고 할 수 있으며 정적입니다.

 

<input type="text" id="input" value="default value">

 

   property의 경우 attribute에 할당된 현재의 값이며 html dom tree에 정의되어 있습니다. property는 attribute와 달리  js를 통해 조작가능한 동적인 값입니다. 아래 js 코드에서는 input 요소의 value property를 통해 value에 접근하고 변경합니다. 

 

const input = document.querySelector("#input");
console.log(input.value);  // Output: "default value"

input.value = "New value";
console.log(input.value);  // Output: "New value"

 

   정리하자면 html 문서의 각 요소는 HTML DOM Three에서 객체로 존재하며 attribute는 이러한 객체의 property로서 HTML DOM Three 상에 존재합니다. 각 property는 JS를 통해 동적으로 접근 및 조작됩니다.