data-* 속성으로 HTML에 데이터 저장하기

Table of contents

data-*

data-* 속성으로 HTML에 사용자가 임의로 정의한 데이터를 정의하고 HTML과 DOM 사이에서 데이터를 교환할 수 있도록 한다.

*부분의 이름을 정하는 규칙은 아래와 같다.

1. 대소문자 상관 없이 xml로 시작할 수 없다.
2. : 문자는 사용할 수 없다.
3. 소문자로 작성해야 한다.

참고로 위 규칙은 XML의 이름 규칙에 의한 권고 사항일 뿐이며, 위반하더라도 문제 없이 동작한다.

Javascript에서 접근하는 방법

Node 또는 Element 객체에서 dataset 속성으로 접근할 수 있다.

<button data-xml:-dd="10">가방 구매</button>
<button data-xml-dd="0">신발 구매</button>
<script>
    // 정적 NodeList 반환
    let buttons = document.querySelectorAll('button')

    // 10
    // undefined
    buttons.forEach(btn_elem => {
        console.log(btn_elem.dataset['xml:Dd'])
    }) 
</script>

HTML에서 정의한 이름에서 - 부분은 사라지고, 앞의 문자가 대문자로 변경되어 dataset의 속성으로 설정된다. (카멜 표기법을 사용한다.)

다른 방법으로는 Element 객체의 getAttribute 메서드를 사용할 수 있다.

<button data-xml:-dd="10">가방 구매</button>
<button data-xml-dd="0">신발 구매</button>
<script>
    // 정적 NodeList 반환
    let buttons = document.querySelectorAll('button')

    // 10
    // undefined
    buttons.forEach(btn_elem => {
        // 수정된 부분
        console.log(btn_elem.getAttribute('data-xml:-dd'))
    }) 
</script>