Index

1. 전용 데이터 속성(Custom Data Attributes)

전용 데이터 속성은 스크립트를 통해 HTML 과 DOM 사이에 정보를 교환할 수 있도록 합니다. 이름은 'data-'로 시작하며, data- 다음에 오는 텍스트는 아래의 규칙을 따릅니다.

• 이름은 xml로 시작할 수 없습니다.
• 이름은 세미콜론(U+003A)을 포함해서는 안됩니다.
• 이름은 A부터 Z까지의 대문자를 포함해서는 안됩니다.

data-* 속성을 추가함으로써, 일반적인 HTML 요소조차도 '스파이더맨'처럼 강력한 프로그램 개체(program-objects)로 바꿀 수 있습니다. 예를 들어, 어떤 게임에서 '스파이더맨'은 class 속성과 여러 data-* 속성을 가지고 있는 단순한 <div> 요소로 나타낼 수 있습니다:

<div class="spiderMan" data-weapons="web_shooter" data-name="peter_parker" 
data-ability="spider_sense spider_strength">스파이더맨</div>

2. 속성 다루기

setAttribute() 함수는 특정 요소에 속성과 속성값을 할당합니다. 이미 속성이 존재한다면 속성값을 갱신하게 됩니다. 만약 요소의 속성값을 얻고자 한다면 getAttribute()를 사용하며, 존재하는 속성을 제거하고 싶으면 removeAttribute() 함수를 사용하면 됩니다. 위에서 작성해 봤던 코드를 조금 바꿔봅시다.

<div class="spiderCat" data-weapons="web_shooter">스파이더냥</div>

setAttribute() 함수를 통해 아직 초능력이 없는 스파이더냥에게 힘을 부여해 봅시다!

const spiderCat = document.querySelector(".spiderCat");
spiderCat.setAttribute("data-ability", "Phenomenal_cosmic_power!!");

자, 이제 스파이더냥에게 어떠한 힘이 부여되었는지 getAttribute() 함수를 통해 확인해 봅시다.

console.log(spiderCat.getAttribute("data-ability"));
"Phenomenal_cosmic_power!!" /* 반환되는 값 */

웁스!! 전지전능한 우주의 힘을 주고 말았네요! 램프의 지니에게 필요한 힘을 스파이더냥에게 잘못 주고 말았습니다. 그 힘을 다시 빼앗고 스파이더냥에게 어울리는 힘을 주도록 합시다.

spiderCat.removeAttribute("data-ability"); /* data-ability 속성을 제거합니다. */
spiderCat.setAttribute("data-new-Ability", "spider_sense spider_strength");