[html] html의 data-* 속성

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

 

표준이 아닌 속성이나, 추가적인 DOM 속성과 같이 다른 조작을 하지 않고도 HTML 태그에 추가 정보를 저장할 수 있도록 도와줌

 

속성 할당

<article
	data-columns="3"
    data-index-number="12345>

 

속성값 가져오기

elem.dataset.columns = ...
elem.dataset.indexNumber = ... // kebab-case -> pascalCase로 변경됨

 

 

예시1: 속성값에 따른 함수 실행

<div id="menu">
  <button data-action="save">저장하기</button>
  <button data-action="load">불러오기</button>
  <button data-action="search">검색하기</button>
</div>

<script>
  class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    save() {
      alert('저장하기');
    }

    load() {
      alert('불러오기');
    }

    search() {
      alert('검색하기');
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

  new Menu(menu);
</script>

data-action에 값을 저장한 후, 해당 문자열에 따른 함수를 실행할 수 있음

 

예시2: 속성 존재 여부로 구분

<input type="button" value="1" data-counter />
<input type="button" value="2" data-counter />

<script>
  document.addEventListener('click', function(event) {

    if (event.target.dataset.counter != undefined) { // 속성이 존재할 경우
      event.target.value++;
    }

  });
</script>

data-counter 속성이 존재하는 지 아닌지를 가지고 판단 가능