[Javascript] 속성(attribute)와 프로퍼티(property)의 차이

속성(attribute)와 프로퍼티(property)의 차이

---

속성(attribute)

DOM을 어떻게 만들어낼 것인가에 대한 필수적인 항목

프로퍼티(property)

런타임 동안 엘리먼트 정보를 저장해두는 주요 수단이자 해당 정보에 어떤 방식으로 접근해야 하는지를 나타냄

DOM 속성과 프로퍼티

엘리먼트의 속성 값에 접근할 때, 두 가지 방식이 존재한다.

하나는 전통적인 DOM메서드인 getAttribute와 setAttribute를 사용하는 방법

두번째는 접근하려는 속성과 대응하는 프로퍼티를 사용하는 방법

이다.

test라는 변수를 통해 참조하고 있는 엘리먼트의 id값을 얻으려면 다음과 같은 방법을 사용할 수 있다.

test.getAttribute(“id”) // 속성으로 얻어옴

test.id // 속성과 대응하는 프로퍼티로 얻어옴

<div></div>
<script>
    document.getElementsByTagName(“div”)[0];
    div.id = “newId”;
    console.log(div.id === div.getAttribute(“id”)); //true
</script>

위으 코드를 보면 프로퍼티를 변경하였는데 id 속성 값도 변경된 것을 볼 수 있다. (Id 프로퍼티와 id속성은 연결되어 있다는 사실을 알 수 있음)

반대로 setAttribute()로 id 속성을 변경하여도 프로퍼티 값 또한 변경된다.

하지만 프로퍼티와 속성은 같지 않다. 속성과 프로퍼티는 서로 연결되어 있지만, 항상 동일하지는 않다.

이름 제약사항

속성 이름은 DOM 메서드(getAttribute()나 setAttribute() )에 전달하는 문자열이기 때문에 자유롭게 이름을 지을 수 있다.

하지만 프로퍼티 이름은 점(.)연산자 표기법을 사용하는 식별자로 간주되고, 식별자 규칙을 따라야하기 때문에 프로퍼티 이름 형식은 다소 제한된다.

=> 프로퍼티 이름과 속성 이름이 서로 다른 경우가 몇 있음 

ex) class/className , readonly/readOnly, maxlength/maxLength (예약어인 경우 className처럼 다른 이름이 존재하고, 여러 단어로 이루어진 속성이름인 경우 낙타표기법(camel-case)를 사용해서 표현한다)

사용자 정의 속성의 작동 방식

엘리먼트가 가진 모든 속성이 프로퍼티로 표현되지는 않는다.

태생적으로 HTML DOM에 지정된 속성들은 프로퍼티로도 표현되지만, 엘리먼트에 임의로 지정한 사용자 정의 속성은 프로퍼티로 자동으로 표현되지 않는다.

이런 사용자 정의 속성 값에 접근하려면 DOM 메서드인 getAttribute()와 setAttribute()를 사용할 필요가 있다.

만약 어떤 속성에 대응하는 프로퍼티가 엘리먼트에 존재하는지 여부를 확신할 수 없다면 프로퍼티의 존재 유무를 확인하는 테스트를 해야한다. 프로퍼티가 존재하지 않는다면 속성을 참조하도록 DOM 메서드를 사용할 수 있다.

var value = element.someValue ? element.someValue : element.getAttribute(“someValue”);

성능에 대한 고려

일반적으로 프로퍼티 접근이 DOM속성 메서드보다 빠르고, 특히 IE에서는 더더욱 그렇다.

따라서 프로퍼티가 없는 경우에만 DOM 메서드를 사용하도록 별도의 메서드를 구현하는 것을 고려해볼만 하다.