[Javascript] Attribute vs Property

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

 

https://cleverbeagle.com/blog/articles/what-is-a-javascript-object

 

Q. What's the difference between an "attribute" and a "property"?

 

 

A.

Attribute와 Property는 둘 다 "속성"을 의미하나, 정의되는 곳에서 차이점이 생깁니다. Attribute는 HTML에서 정의되는 속성이고, Property는 DOM에서 정의되는 속성입니다. 

 

 

 

Attribute

 

Attribute는 HTML태그에HTML 태그에 추가적인 정보를 제공합니다. 다음의 예시처럼 HTML 태그에 class, id, type 등의 추가적인 정보를 제공하는 경우가 있는데, 이때 이 name="value" 형식의 정보를 가리켜서 'name'이라는 Attribute를 'value'로 초기화하였다.라고 이야기합니다.

<div class="yeoul"></div>

위 예시의 경우 div 태그는 class라는 attribute를 가지며, 이 값을 'yeoul'로 초기화하였다고 이야기할 수 있습니다.

 

 

 

Property

 

Property는 Attribute와 굉장히 비슷하지만 정의되는 위치가 HTML 파일이 아닌 DOM이라는 데에 그 차이가 있습니다. 브라우저에서 DOM트리를 생성할 때(위의 예시를 사용한다고 가정하겠습니다.) div 태그의 attribute와 value를 읽어서 노드를 생성합니다. 이 노드에 저장되는 attribute와 value가 바로 Property입니다. 

 

 

이렇게만 들으면 두 개가 완전히 동일해 보이지만, DOM트리의 특성상, Javascript코드에 의해 언제든지 그 속성의 값이 변할 수 있습니다. 

예를 들어서 class Property가 특정 조건에 따라 추가될 수도 있고, 제거될 수도 있는 것입니다. 이때 제거되고 추가되는 일은 HTML 파일이 아닌 DOM Tree에서 Javascript에 의해 행해집니다. 따라서 javascript에 의해 변경될 수 있도록 DOM에 정의된 속성들을 Property라 하고, HTML 파일에 기록돼서 DOM이 생성될 때 처음 값을 초기화해주는 것이 Attribute라고 정의할 수 있습니다.

 

 

Attribute와 Property는 동일한 이름을 가지고 있어서 혼용해서 사용해도 무방한 것처럼 보이지만, 정의되는 곳과, 변경 및 조작 여부에 따라 큰 차이가 있으므로 주의해야 합니다.

 

 

Reference

 

jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

HTML: The difference between attribute and property

 

stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6004028

What is the difference between properties and attributes in HTML?