비표준속성을 이용하여 요소노드의 스타일적용.
<!-- 이름(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>html요소노드의 값을 서버로부터 받아와서 설정해야 할때 요소노의 비표준속성에 필드값을 넣고 서버로부터 받은 객체프로퍼티와 매핑하여 스타일을 설정할때 비표준속성을 사용할 수 있다.
커스텀속성(비표준)을 CSS에 사용할 수 있다.
<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>위와같이 비표준속성을 CSS속성으로 사용한 방법과 .order-state-new, .order-state-pending, order-state-canceled같은 클래스를 사용하는 것의 차이를 이해하자.
비표준속성과 CSS의 조합으로 사용하는 것이 효율적이다.
div.setAttribute('order-state', 'canceled');class='order'를 유지하면서 속성상태를 쉽게 변경할 수 있는 이점이 있다.
비표준속성을 사용했을때 단점
사용한 비표준속성이 향후에 표준으로 되었을때는 충돌이 발생한다.
자바스크립트가 발전함에따라 비표준속성을 위한 표준속성을 지원한다.
’data-'로 시작하는 태그속성은 커스텀속성으로 예약되었으며 DOM객체에서 dataset프로퍼티를 사용하여 접근할 수 있다.
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script>data-order-state 같이 여러 단어로 구성된 속성은 카멜표기법(camel-cased)을 사용해 dataset.orderState으로 변환된다.
<style>
.order[data-order-state="new"] {
color: green;
}
.order[data-order-state="pending"] {
color: blue;
}
.order[data-order-state="canceled"] {
color: red;
}
</style>
<div id="order" class="order" data-order-state="new">
A new order.
</div>
<script>
// 읽기
alert(order.dataset.orderState); // new
// 수정하기
order.dataset.orderState = "pending"; // (*)
</script>data- 속성을 사용하였으므로 DOM객체에서 dataset프로퍼티로 속성을 변경하면 되며 표준화로 인한 충돌가능성이 없다.
