<!--  제품에 대한 정보를 저장하기 위해
      data-* 속성이 사용됩니다.
      각 속성은
      제품의 이름(data-name),
      가격(data-price),
      재고(data-stock),
      색상(data-color)을 나타냅니다.
-->
<div 
    id="product-12345"
    data-name="운동화"
    data-price="10000"
    data-stock="5"
    data-color="red">
    운동화
</div>

<!-- 버튼에는
     해당 제품의 ID를 나타내는
     data-product-id 속성이 있습니다.
-->
<button
    type="button"
    id="product-details"
    data-product-id="product-12345">
    제품 상세정보 보기
</button>
const viewDetails = document.getElementById("product-details");

viewDetails.addEventListener("click", function() {
    const productId = this.dataset.productId;
    const product = document.getElementById(productId);

    /* 제품 요소에서 데이터 속성을 사용하여
       제품 이름, 가격, 재고, 색상을 가져옵니다. */
    const productName = product.dataset.name;
    const price = product.dataset.price;
    const stock = product.dataset.stock;
    const color = product.dataset.color;
    
    /* 가져온 제품 정보를 문자열로 조합하여
       알림창으로 표시합니다. */
    const msg = "제품 이름: " + productName +
                "\n가격: " + price + "원" +
                "\n재고: " + stock + "개" + 
                "\n색상: " + color;          
    alert(msg);
});
실제 적용된 모습 버튼을 클릭해 보세요!
알림창으로 제품의 상세정보를 볼 수 있습니다.
<div 
    id="product-12345"
    data-name="운동화"
    data-price="10000"
    data-stock="5"
    data-color="red">
    운동화
</div>
[data-name] { /*  CSS의 선택자로 접근 */
    padding: 1em;
    background-color: yellowgreen;
}
[data-color="red"] { /*  CSS의 선택자로 접근 */
    color: red;
}
<style>
    [data-text]::before {
        content: attr(data-text) ": ";
        font-weight: 600;
        color: red;
    }
</style>
<p data-text="일러두기">
    데이터 속성을 보여야 하고 접근 가능한 내용에 저장하지 마세요!
</p>
실제 적용된 모습

caniuse.com에서 더 자세한 정보를 확인해 보세요.