모든 HTML 요소에 사용자 정의 데이터를 저장하려면 data-* 속성을 활용할 수 있습니다. 사용자 정의 데이터 속성은 반드시 data-로 시작해야 하며, 속성 이름에는 대문자를 포함할 수 없습니다. 이 속성은 화면에는 표시되지 않지만 JavaScript나 CSS에서 자유롭게 읽어올 수 있어, 요소에 추가 정보를 담아 두는 데 매우 유용합니다.
예제
아래 예제에서는 리스트 항목마다 data-rank-type이라는 사용자 정의 데이터 속성을 지정하고, 항목을 클릭하면 해당 값을 읽어 알림 창으로 표시합니다.
<!DOCTYPE html>
<html>
<head>
<script>
function display(rank) {
var myRank = rank.getAttribute("data-rank-type");
alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
}
</script>
</head>
<body>
<h1>Rank and Points</h1>
<p>Click on any rank to generate the details.:</p>
<ul>
<li onclick = "display(this)" id = "fifth" data-rank-type = "500">Fifth</li>
<li onclick = "display(this)" id = "sixth" data-rank-type = "600">Sixth</li>
</ul>
</body>
</html>
실행 결과
각 순위 항목을 클릭하면 "Rank Fifth has 500 points.", "Rank Sixth has 600 points."처럼 해당 순위의 포인트 정보가 담긴 알림 창이 나타납니다.
추가 팁: dataset 객체 활용하기
JavaScript에서는 getAttribute() 메서드 대신 dataset 객체를 사용하면 더욱 간편하게 데이터 속성에 접근할 수 있습니다. 예를 들어 data-rank-type 속성은 rank.dataset.rankType 형태로 읽거나 수정할 수 있으며, 속성 이름의 data- 이후 부분이 카멜 케이스(camelCase)로 자동 변환된다는 점을 기억해 두면 좋습니다.