HTML data 속성

그동안 form 파라미터를 넘기거나 할 때 input타입에 hidden을 사용해서 넘기는 방식을 많이 사용했었습니다.

data속성을 사용하면 간단하게 넘길 수 있다는 것을 알게되어서 그 방법을 정리하려고 합니다.

 

주의할 점은 HTML 태그 안에 정보가 담기므로 공개적으로 접근하여 데이터를 확인할 수 있어서 어느 정도의 제약이 있는 방식으로 생각됩니다.

 

dataset을 통해 접근할 수 있습니다.

<p data-id="cat" id="test"></p>

<script>
    let test = document.getElementById("test");
    console.log(test.dataset);    //DOMStringMap {id: "cat"}
    console.log(test.dataset.id); //cat

    //추가
    test.dataset.animal = 'dog';
    console.log(test.dataset.animal); //dog
</script>