HTML 요소의 'data-' 속성 ele.dataset.? 활용하기

- HTML 요소에 속성 넣어 주는 법과 접근하는 법 -

<option data-code="0016">교육</option>

<div data-color="red"> 사과 </div>

HTML 요소들은 여러 가지 속성 값을 갖는다.
id="--" / class="--" / style="--" / value="--"

이렇게 엘리먼트가 들고 있는 속성들에 접근할 때는 아래처럼 쓴다.

const ele = document.querySelector('#target');
ele.id;     // 엘리먼트의 ID 값
ele.tagName; // 엘리먼트의 tag 값
ele.style;  // 엘리먼트의 style 값
.....

 

- HTML 요소에 'data-' 속성 넣어 주는 법과 접근하는 법 -

그중에서도 'data-' 로 시작하는 속성도 종종 보인다.
data-color="red" / data-code="0016" / data-position="after"

뭐하는 데에 쓰는 속성인가 하니,
엘리먼트가 들고 있어야 하는 값들을 여기에 넣어둘 수도 있고,
또 필요할 때 가져다가 쓸 수 있다.

'data-' 속성도 이처럼 접근할 수 있다.
바로 'dataset' 이라는 속성 이름을 쓰면 된다.

<option data-code="0016">교육</option>
ele.dataset.code;   // '0016'

<div data-color="red">사과</div>
ele.dataset.color;   // 'red'

<span data-position="after">감사합니다</span>
ele.dataset.position;   // 'after'

 

 

- 덧붙임 : 일반 속성에 접근하는 법 -

물론 커스텀 속성을 만들고 값을 넣어둘 수도 있다.
하지만 getter / setter 함수를 써야 하기 때문에 훨씬 번거롭다.
<option code="0016">교육</option>
ele.getAttribute("code");   // '0016'
ele.setAttribute("code", "0021");

- 220811