개요
HTML에서 애트리뷰트(Attribute)는 스타일 제어 또는 고유한 정보를 할당하거나 JavaScript에서 HTML 요소를 접근하기 위해 사용된다. 일반적으로 가장 잘 알려진 애트리뷰트는 id 및 class 애트리뷰트이며, 이 외에도 name, tab, role, tabindex, target, rel 등 다양한 애트리뷰트가 존재한다.
개발자는 위에서 언급한 애트리뷰트가 아닌 커스텀 애트리뷰트를 사용할 수 있는데, 아래 예제처럼 말도 안 되는 이름으로 애트리뷰트를 설정하는 것이 가능하고 JavaScript에서 커스텀 애트리뷰트를 접근하는 것도 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Custom Event</title>
</head>
<body>
<button id="btn-example" hahaha-is-funny="Good!">버튼</div>
<script>
// id 애트리뷰트로 HTML 요소 접근
const btnElement = document.getElementById("btn-example");
// 버튼에 클릭 이벤트 리스너 추가
btnElement.addEventListener('click', function() {
// 클릭한 버튼의 hahaha-is-funny 애트리뷰트의 값을 콘솔에 출력
console.log(this.getAttribute("hahaha-is-funny"));
})
</script>
</body>
</html>하지만 대부분의 개발자들은 커스텀 애트리뷰트를 사용하는 것을 꺼려한다. 커스텀 애트리뷰트를 작성한 본인은 해당 애트리뷰트를 사용한 이유를 알고 있지만, 다른 사람들은 모르기 때문이다.
data 애트리뷰트란?
HTML 요소에 정보를 추가하려면 커스텀 애트리뷰트가 아닌 "data-"로 시작하는 data 애트리뷰트를 사용한다.
예를 들어, 웹 페이지에 프로그래밍 언어를 보여준다고 가정했을 때, 아래와 같이 코드를 작성할 수 있다.
<ul>
<li>Svelte</li>
<li>React</li>
</ul>추가적인 요구사항으로 저자의 이름이 필요한데, 웹 페이지에 노출되면 안 된다고 한다. 이러한 경우 data 애트리뷰트를 사용할 수 있다.
<ul>
<li data-name="Rich Harris">Svelte</li>
<li data-name="Jordan Walke">React</li>
</ul>[실행 결과]
저자의 이름이 웹 페이지에 표시되고 있지는 않지만, data-name 애트리뷰트가 존재하는 것을 크롬 개발자 도구에서 확인할 수 있다.
커스텀 애트리뷰트와 data 애트리뷰트는 차이점이 없어 보이지만, 커스텀 애트리뷰트보다 data 애트리뷰트를 사용해야 하는 두 가지 이유가 존재한다. 첫 번째 이유는 JavaScript에서 data 애트리뷰트만 다룰 수 있도록 dataset이라는 프로퍼티를 제공한다는 것이며, 두 번째 이유는 CSS에서 data 애트리뷰트를 사용하여 스타일을 설정할 수 있다는 것이다.
data 애트리뷰트로 스타일 설정하기
data 애트리뷰트를 CSS에서 사용하여 스타일을 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Custom Event</title>
<style>
/* data-name 애트리뷰트가 존재하는 HTML 요소의 color을 red로 설정 */
[data-name] {
color: red;
}
/* data-name 애트리뷰트의 값이 "Rich Harris"인 HTML 요소의 color를 green으로 설정 */
[data-name="Rich Harris"] {
color: green;
}
/* id 애트리뷰트의 값이 "vue"이며 data-name 애트리뷰트가 존재하는 HTML 요소의 color를 yellow로 설정 */
#vue[data-name] {
color: yellow;
}
</style>
</head>
<body>
<ul data-list="Programming Language List">
<li data-name="Rich Harris">Svelte</li>
<li data-name="Jordan Walke">React</li>
<li id="vue" data-name="Evan You">Vue</li>
</ul>
<script></script>
</body>
</html>[실행 결과]
CSS 스타일은 대소문자를 구분하므로 CSS에서 data 애트리뷰트의 값을 입력할 때, 대소문자를 제대로 구분했는지 주의하도록 한다.
data 애트리뷰트 가져오기
아래 HTML 마크업 문서처럼 HTML 요소는 data 애트리뷰트를 여러 개 가질 수 있다.
<input id="test-input"
data-name="input-name"
data-value="input-value"
data-custom
data-test-custom="test-custom" />JavaScript에서 data 애트리뷰트에 설정된 값을 가져오려면 querySelector(), getElementById()와 같은 메서드를 사용하여 HTML 요소를 접근한 다음 dataset 프로퍼티를 호출한다.
const inputElement = document.getElementById("test-input");
console.log(inputElement.dataset);
// DOMStringMap {name: 'input-name', value: 'input-value', custom: '', testCustom: 'test-custom'}
console.log(inputElement.dataset.name);
// input-name
console.log(inputElement.dataset.value);
// input-value
console.log(inputElement.dataset["custom"] === "");
// true
console.log(inputElement.dataset["testCustom"]);
// test-custom
console.log(inputElement.dataset.testCustom);
// test-customdataset 프로퍼티는 DOMStringMap 객체를 반환하며, 개별 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용하여 접근할 수 있다.
위 예제를 통해 data 프로퍼티의 두 가지 특징을 알 수 있는데, 첫 번째 특징은 test-custom은 카멜 케이스인 testCustom으로 변환된다는 것이다. 두 번째 특징은 data 애트리뷰트는 존재하는데 값이 설정되지 않은 경우 빈 문자열("")을 반환한다는 것이다.
data 애트리뷰트 추가
일반 객체에서 프로퍼티를 추가하는 방법과 동일하게 data 프로퍼티를 추가할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Custom Event</title>
</head>
<body>
<input id="test-input" />
<button id="btn">버튼</button>
<script>
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", function () {
const inputElement = document.getElementById("test-input");
inputElement.dataset.name = "data-name";
inputElement.dataset.testCustom = "test-custom";
});
</script>
</body>
</html>[실행 결과]
버튼을 클릭하면 data-name, data-test-custom 애트리뷰트가 추가된다. 특이한 점으로 JavaScript에서 추가한 testCustom 프로퍼티가 HTML 요소에서 test-custom으로 변경된 것을 볼 수 있다.
data 애트리뷰트 변경
일반 객체에서 프로퍼티의 값을 변경하는 방법과 동일하게 data 프로퍼티의 값을 변경할 수 있다.
아래 예제는 버튼을 클릭하면 data-value 애트리뷰트의 값을 "hello"로 변경한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Data Attribute</title>
</head>
<body>
<input id="test-input" data-value="test-value" />
<button id="btn">버튼</button>
<script>
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", function () {
const inputElement = document.getElementById("test-input");
inputElement.dataset.value = "hello";
});
</script>
</body>
</html>
data 애트리뷰트 삭제
delete 연산자를 사용하여 data 애트리뷰트를 제거할 수 있다.
아래 예제는 버튼을 클릭하면 data-value 애트리뷰트를 제거한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Data Attribute</title>
</head>
<body>
<input id="test-input" data-value="test-value" />
<button id="btn">버튼</button>
<script>
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", function () {
const inputElement = document.getElementById("test-input");
delete inputElement.dataset.value;
});
</script>
</body>
</html>
정리
- 사용자에게 보여서는 안 되는 데이터를 data 애트리뷰트에 설정할 수 있습니다.
- CSS에서 "data-"를 사용하여 스타일을 적용할 수 있습니다.
- JavaScript에서 dataset 프로퍼티를 사용하여 data 애트리뷰트의 정보가 담긴 DOMStringMap 객체를 가져올 수 있습니다.
참고 자료
[1] scaler - Waht is Data Attribute in HTML?
[2] medium - How To Use Data Attributes In JavaScript, CSS + HTML
'JavaScript > DOM' 카테고리의 다른 글
| [JS]커스텀 이벤트 생성하기(CustomEvent 및 dispatchEvent) (0) | 2022.12.11 |
|---|---|
| [JS]이벤트 위임(Event Delegation)이란? (0) | 2022.12.11 |
| [JS]이벤트 핸들러와 이벤트 리스너 (0) | 2022.12.10 |
| [JS]이벤트 흐름(Event Flow) 이해하기 (0) | 2022.12.10 |
| [JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기 (0) | 2022.12.10 |
댓글