JavaScript - 데이터 속성 사용하기

데이터 속성 사용하기

HTML은 특정 요소와 연관되어야 하지만, 정의된 의미를 갖지 않는 데이터에 대한 확장성을 고려하여 설계되었다.

data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와준다.

📌 HTML 문법

속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성이다.
화면에 안보이게 글이나 추가 정보를 엘리먼트에 담을 수 있다.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

📌 JavaScript에서 접근하기

값을 읽기 위한 완전한 HTML 이름과 함께 getAttribute()를 사용하면 된다.
dataset 객체를 통해 data 속성을 가져오기 위해선, data- 뒤의 속성 이름 부분을 사용해 속성을 가져온다.

const $article = document.querySelector("#electric-cars");

$article.dataset.columns; // "3"
$article.dataset['indexNumber']; // "12314", 배열 인덱스로 접근
$article.dataset.parent; // "cars"

$article.getAttribute('data-columns'); // "3"
$article.getAttribute('data-indexNumber'); // "12314"
$article.getAttribute('data-parent'); // "cars"

dataset 프로퍼티로 접근할 경우, 속성 이름이 자동으로 낙타 표기법(Camel-Case)로 변환된다는 점에 유의해야 한다.
이는 자바스크립트에서 변수명으로 - 기호가 허용되지 않기 때문이다.
그래서 만약 data-index-number가 있따면, 이는 dataset.indexNumber로 변환되게 된다.

📌 데이터셋 삭제 하기

자바스크립트로 데이터 속성을 제거하는 대표적인 방법은 다음 두가지가 있다.

• delete 키워드로 객체 속성 삭제
• 일반적인 속성 제거 메서드 removeAttribute() 사용

const $article = document.querySelector("#electric-cars");

delete $article.dataset.columns;
$article.removeAttribute('data-indexNumber');

📌 CSS에서 접근하기

CSS에서 특정 데이터 속성을 가지는 엘리먼트에 접근하고자 할 때는 attr()을 사용하면 된다.

article::before {
  content: attr(data-parent); // 부모 데이터를 article에서 보여준다.
}

article[data-columns="3"] {
 width: 400px; 
}

article[data-columns="4"] {
 width: 600px; 
}

데이터 값은 문자열이기 때문에, 스타일을 적용하려면 따옴표로 작성해주어야 한다.

📌 문제점

보여야 하고 접근 가능한 내용은 데이터 속성에 저장하지 말아야 한다.
접근 보조 기술(예: 스크린 리더기)이 접근할 수 없기 때문이다.
또한, 검색 크롤러가 데이터 속성의 값을 인덱싱하지 못할 수도 있다.