November 29, 2021

브라우저는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성합니다. 요소 노드(element node)에서 대부분의 표준 HTML 속성(attribute)은 DOM 객체의 프로퍼티(property)가 됩니다.

태그 <body id="page">가 있을 때, DOM 객체에서 body.id="page"를 사용할 수 있는 것 같이 말이죠.

그런데 속성-프로퍼티가 항상 일대일로 매핑되지는 않습니다! 이번 챕터에선 속성과 프로퍼티를 어떻게 다룰 수 있는지, 두 가지가 언제 일대일로 매핑되는지, 언제는 매핑되지 않는지에 주의하면서 두 개념을 알아보겠습니다.

물론 방법이 있습니다. 모든 속성은 아래의 메서드를 사용해 접근할 수 있습니다.

elem.hasAttribute(name) – 속성 존재 여부 확인
elem.getAttribute(name) – 속성값을 가져옴
elem.setAttribute(name, value) – 속성값을 변경함
elem.removeAttribute(name) – 속성값을 지움

예시:

<a id="a" href="#hello">link</a><script>
  // 속성
  alert(a.getAttribute('href')); // #hello

  // 프로퍼티
  alert(a.href ); // 실행되는 사이트 주소에 따라 <http://site.com/page#hello> 형태로 값이 저장됨
</script>

HTML에 내에 명시된 href 속성의 값을 정확하게 얻고 싶다면 getAttribute을 사용하면 됩니다.

비표준 속성, dataset

HTML을 작성할 때 우리는 대부분 표준 속성을 사용합니다. 하지만 표준이 아닌 속성도 존재합니다. 이런 비표준이 유용한 지 아닌지, 그리고 어떤 경우에 비표준 속성을 사용해야 하는지 알아봅시다.

비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나 자바스크립트를 사용해 조작할 HTML 요소를 표시하기 위해 사용할 수 있습니다.

<!-- 이름(name) 정보를 보여주는 div라고 표시 -->
<div show-info="name"></div>
<!-- 나이(age) 정보를 보여주는 div라고 표시 -->
<div show-info="age"></div>

<script>
  // 표시한 요소를 찾고, 그 자리에 원하는 정보를 보여주는 코드
  let user = {
    name: "Pete",
    age: 25
  };

  for(let div of document.querySelectorAll('[show-info]')) {
    // 원하는 정보를 필드 값에 입력해 줌
    let field = div.getAttribute('show-info');
    div.innerHTML = user[field]; // Pete가 'name'에, 25가 'age'에 삽입됨
  }
</script>