[JS] data-*속성과 dataset 프로퍼티

티스토리 뷰

이론/JS

[JS] data-*속성과 dataset 프로퍼티

millfeel1298 2021. 2. 27. 04:45

비표준 속성의 충돌을 방지하기 위한 data-* 속성

’data-'로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 되고,

dataset 프로퍼티를 사용하면 data 속성에 접근할 수 있다.

[예제]

<body data-about="Elephants" data-order-state="new">

<script>
  console.log(document.body.dataset.about); // Elephants
  console.log(document.body.dataset.orderState); // new
</script>

요소에 이름이 "data-about"인 속성이 있다면 elem.dataset.about을 사용해 값을 얻을 수 있다.

data-order-state 같이 여러 단어로 구성된 속성은 카멜 표기법(dataset.orderState)으로 변환해서 사용할 수 있다.

Q. 속성과 프로퍼티의 차이는?

속성 – HTML 안에 쓰임
프로퍼티 – DOM 객체 안에 쓰임

Q. 비표준 속성이란 무엇인가요?

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

아래의 예시의 경우 .order-state-new, .order-state-pending, order-state-canceled가 비표준속성이다.

<style>
  /* 스타일이 커스텀 속성 'order-state'에 따라 변합니다. */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>

<div class="order" order-state="pending">
  A pending order.
</div>

<div class="order" order-state="canceled">
  A canceled order.
</div>

클래스보다 비표준 속성을 선호하는 이유는?

속성은 클래스보다 다루기 편리하다는 점 때문이다. 속성의 상태는 아래와 같이 쉽게 변경할 수 있다.

// 새 클래스를 추가하거나 지우는 것보다 더 쉽게 상태(state)를 바꿀 수 있습니다
div.setAttribute('order-state', 'canceled');

단, 커스텀 속성은 문제가 발생할 수 있다. 비표준 속성을 사용해 코드를 작성했는데 나중에 그 속성이 표준으로 등록되게 되면 문제가 발생할 수 있기 때문에 data-* 속성을 사용한다.

[공부 좌표]

비표준 속성, dataset

'이론 > JS' 카테고리의 다른 글

[JS] DOMTokenList.contains() (0)	2021.03.02
[JS] 노드 복제하기 - cloneNode (0)	2021.03.01
[JS] Q. 함수는 객체이다? (0)	2021.02.25
[JS] Object.create() (0)	2021.02.24
[JS] class - super (0)	2021.02.23

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

밀 종합 ٩(`╹ω╹´)و

티스토리 뷰