[HTML/JavaScript] data 속성 사용법, dataset 사용법 - data 속성으로 table 행 번호 채번하기

 

 이번 포스팅은 HTML data 속성에 대한 간단한 사용법과 예제를 다룹니다.

1. 'data' 속성 

 HTML 태그 내에 속성 중 'data-???' 식으로 되어있는 속성들을 마주한다면, 모두 data 속성이라 칭할 수 있다.

class, id 등과 같이 정해진 속성이 아닌 사용자가 만드는 고유한 속성으로 'data-' 라는 접두어 규칙으로 명명한다.

[예시 : 'data-temp' , 'data-tag']

<div id="test" data-temp="sample data" data-tag="tag 123"></div>

 # JavaScript에서 dataset에 접근하는 방법

 HTML 선택자를 통해 위에서 정의한 data 속성에 대해 접근할 수 있다.

"HTML Element" . dataset . (속성명칭)

2. 사용 예시

1) 2행, 2열로 구성된 table 태그에서 tr 태그 별로 행 구분을 하기 위한 data 속성을 정의한다. (data-rowidx)

2) 테이블 영역 클릭 이벤트에 맞춰 선택(클릭) 행의 값 (data-rowidx)을 출력한다.

See the Pen Untitled by Dong Hyun Kim (@hyun0721) on CodePen.

사용처에 따라 다양한 목적으로 사용될 수 있겠으나, HTML과 JavaScript 간에 암묵적으로 약속되는 키워드기 때문에 무분별히 남발하는 것은 지양해야할 것으로 보입니다.