🐇 접근

모든 Element에서 data-로 시작하는 속성에 대해 모두 접근할 수 있습니다.

//data- 속성 값 지정
<article
	id="example"
	data-id="0"
	data-index="1"
	data-parent="ex"
>
</article>

🥕 JavaScript에서 접근하기

var $articleItem = document.getElementById("example");

$articleItem.dataset.id // 0
$articleItem.dataset.index // 1
$articleItem.dataset.parent // ex

🥕 Css에서 접근하기

article::before {
	content: attr(data-parent);
}
article[data-index="1"] {
	width: 100%;
}
article[data-index="5"] {
	width: 50%;
}

🐇 유의사항

.map((keyword) => {
	//data- 를 map과 같은 값 : keyword로 설정할 경우
	<button class="Keyword" data-keyword="${keyword}">
		${keyword}
	</button>
	//data- 를 map과 다른 값 : word로 설정할 경우
	<button class="Keyword" data-word="${keyword}">
		${keyword}
	</button>
}

const $keywordItem = e.target.closest(".Keyword");
const { keyword } = $keywordItem.dataset;

위 두가지의 경우 data-keyword인 항목은 정상작동하지만, data-word인 경우 undefined를 반환함.