프로퍼티와 어트리뷰트 차이

jjyung·2021년 10월 8일

@property JavaScript attribute js 자바스크립트

JS

목록 보기

8/13

글을 쓰게된 계기

수업시간에 DOM과 브라우저 렌더링에 관해 배우다보니 프로퍼티와 어트리뷰트라는 용어가 많이 나왔다. 둘 다 '속성'이라는 의미를 가지고 있는데, 도대체 왜 다르고 어떻게 다른지 너무 헷갈려서 이번참에 정리해보기로했다.

프로퍼티와 어트리뷰트의 정의

자바스크립트에서 프로퍼티란, 키와 값으로 구성된 객체 내부의 속성을 의미한다.

자바스크립트는 원시 타입을 제외하고는 대부분이 다 객체이다. 이런 객체를 이루는 것이 프로퍼티의 키와 값인데 이 프로퍼티는 DOM(Document Object Model)을 설명할때도 등장을 한다. DOM은 프로퍼티와 메서드를 제공하는 트리자료구조인데, 이 때 프로퍼티와 메서드는 자신의 구조와 정보를 제어할 수 있는 DOM API를 뜻한다.

반면, 어트리뷰트는 HTML에서 찾을 수 있다.

<span class = "apple" >Apple</span>

위의 경우 class가 어트리뷰트의 이름이고, apple이 어트리뷰트의 값이 된다. 즉, 여기서 어트리뷰트는 HTML에 class처럼 추가적인 정보를 넣을때 사용이된다. 그리고 이 어트리뷰트는 렌더링 엔진에 의해 HTML이 파싱될때 어트리뷰트의 노드로 변환된다. 노드 객체는 총 12가지가 있는데 그 중 하나가 (중요한 노드 타입) 이 어트리뷰트 타입이다. 노드 객체가 이렇게 12개씩이나 있다보니 노드 타입에 따라 필요한 기능들이 다 다르기때문에 다양한 노드에게 제공해줄 기능(프로퍼티와 메서드)들을 가지고있는 집합이 DOM API이다.

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

// 사용자 정의 프로퍼티
document.body.userData = {
  id : 1,
  name : 'Park'
};

DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고있다. DOM 프로퍼티는 getter와 setter가 모두 존재하는 접근자 프로퍼티로서, 값을 참조 및 편경이 가능하다. 그래서 사용자의 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지한다. (즉, 값이 가변한다)

DOM 프로퍼티는 자바스크립트에서 객체처럼 행동해 어떤 값이든 가질 수 있고, 대소문자를 구분한다.

반면, HTML 어트리뷰트는 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리한다. 그래서 사용자의 입력이 있어도 초기 상태는 변경되지 않는다. 이 값을 변경해주기 위해서는 getAttribute/ setAttribute 메서드가 필요하다.

즉, DOM 프로퍼티는 (사용자에게 입력을 받은) 최신 값을 가지고있고, HTML 어트리뷰트는 (요소의) 초기 값을 가지고있다.

HTML 어트리뷰트와 DOM 프로퍼티의 대응 관계

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>practice</title>
</head>
<body>
  <!-- HTML Attribute -->
  <input id="user-id" type="text" value="abc123">
  
  <script>
    const $userId = document.querySelector(".user-id");
    
    // DOM 프로퍼티에 값을 할당하여 HTML 요소의 최신 상태 변경
    $userId.value = 'hello123';
    
    // 하지만 HTML 어트리뷰트값은 초기 상태로 유지된다. 
    console.log($userId.getAttribute('value')); //abc123
 </script>
</body>
</html>