HTML - Data 속성

Data 속성

• html5부터 데이터 속성이라는 개념이 추가 되었고 이러한 데이터 속성은
  특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다.

• data- 전역 특성은 사용자 지정 데이터 특성 이라는 특성 클래스를 형성할 수 있다.

(1) 특징

1) dataset은 자바스크립트이기 때문에 속성명을 camelCase로 변환된다.

data-create-date  -> (dataset 안에서는) createDate로 저장
data.monthSalary = 500'   -> data-month-salary

2) 특정 속성값만 추출하는 법

console.log(***.datset.***);
console.log(xxx.dataset['***']);

3) 데이터 속성 값 바꾸기

let input = document.querySelector("***")
input.dataset.code = "aaa"

4) HTML 문법으로 사용 가능하며 화면에 안보이게 글이나 추가 정보를 담을 수 있다.

<div>   	
 id="name" 
 data-columns="2"   
 data-index-number="123"
 ...
</div>

5) javascript로 접근하는 법

let article = document.getElementById("name");

article.dataset.columns  // 3

article.dataset.indexNumber //"123"

(2) 문제점

• 관찰 해야하는, 접근 가능해야하는 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋다.
  접근 보조 기술이 접근 할 수 없기 때문이다. 또한 검색 크롤러가 데이터 속성의 값을
  찾지 못하는 문제도 가지고 있다.

• HTML에 데이터를 넣는 것은 누구에게나 보이고 자바스크립트로 접근 가능하기 때문에
  누구나 수정할 수 있다. 그러므로 민감한 데이터는 넣지 않는 것이 좋다.

• JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능이 저조하다.