JavaScript
데이터 속성

통사론

• var x = HTMLElement.dataset. *;
• HTMLElement.dataset. * = "value";

비고

데이터 속성 액세스

데이터 집합 속성 사용

새 dataset 속성을 사용하면 모든 요소의 모든 데이터 특성 data-* 에 액세스 (읽기 및 쓰기 모두 가능) 할 수 있습니다.

<p>Countries:</p>
<ul>
  <li id="C1" onclick="showDetails(this)" data-id="US" data-dial-code="1">USA</li>
  <li id="C2" onclick="showDetails(this)" data-id="CA" data-dial-code="1">Canada</li>
  <li id="C3" onclick="showDetails(this)" data-id="FF" data-dial-code="3">France</li>
</ul>
<button type="button" onclick="correctDetails()">Correct Country Details</button>
<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.dataset.id
            + "\r\nDial Code: " + item.dataset.dialCode;
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.dataset.id = "FR";
    item.dataset.dialCode = "33";
}
</script>

참고 : dataset 속성은 최신 브라우저에서만 지원되며 모든 브라우저에서 지원하는 getAttribute 및 setAttribute 메소드보다 약간 느립니다.

getAttribute 및 setAttribute 메소드 사용

HTML5 이전의 구형 브라우저를 지원하려면 데이터 속성을 포함한 모든 속성에 액세스하는 데 사용되는 getAttribute 및 setAttribute 메소드를 사용할 수 있습니다. 위 예제의 두 함수는 다음과 같이 작성할 수 있습니다.

<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.getAttribute("data-id")
            + "\r\nDial Code: " + item.getAttribute("data-dial-code");
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.setAttribute("id", "FR");
    item.setAttribute("data-dial-code", "33");
}
</script>