🤔 "data-"는 어떤 속성일까?
1️⃣ .. "data-란"
HTML5 에서 새로 확장된 속성비표준 속성을 표준처럼 사용 => "커스텀 속성" "data-*" 속성으로 표시, HTML5 표준 속성 처럼 접근 가능
HTML 에 추가의 속성이나 데이터를 표기하는 표준이 없어
비표준 방법으로 데이터를 표기하던 라이브러리들이 표준방법으로 사용하는 것
dataset 맵타입으로 모아서 관리
JS 또한 표준화된 DOM 메서드로 dataset property(속성) 접근 가능2️⃣ .. 표준속성과 비표준속성 ?
표준속성
브라우저는 HTML 파싱해 DOM 객체를 만들때 HTML 표준속성으로 인식
DOM 객체의 Property 가 되는 속성
(ex. id 나 class 와 같은 attribute)
비표준속성
DOM 에서 대응되는 Property가 생기지 않음
(문제점, html 발전중이기 때문에 나중에 그 속성이 표준으로 등록하게 되면
문제 발생 가능)3️⃣ .. Attribute 와 Property ?
Attribute
html 문서 안에서의 정적인 속성
(ex. <div class = "student"> </div>)
ㄴ> "class"
Property
html DOM 안에서 동적인 속성
(DOM, Document Object Model, 문서객체모델)
(<html> 이나 <body> 같은 html 문서의 태그들을 JS 가 이용가능한 객체로 만든 것)
4️⃣ .. 유용성 and 언제 사용 ?
> 사용자가 직접 지정한 데이터를 HTML 에서 JS 넘기고 싶은 경우
JS 사용해 조작할 HTML 요소를 표시하기 위해(네이밍)
// 이름 정보라고 표시 // 나이 정보라고 표시
(<div show-info="name"> <div show-info="age">)
> 클래스도 표시하고 JS로 넘기고 싶은데 비표준 속성 사용하는 이유
클래스보다 추가/삭제가 용이해서 사용❗최종정리
data- 로 시작하는 속성 전체는 개발자가 용도에 맞게 사용
dataset 프로퍼티를 사용하면 이 속성 접근 가능
DOM 의 dataset 에서 data-order-state 와 같이 '-'이 여러개인 경우
"카멜표기법" 적용 => orderState
수정방법
=> document.querySelector("#slider")
.setAttribute('data-order-state','cooking')
CSS 로 데이터셋 속성 접근
=> .friends[data-order-state='cooking']{}
제약사항
=> "호환성 문제"
=> 검색엔진에서 인덱싱
=> 검색엔진에 노출할 내용, 태그에 넣어야할 컨텐츠 X
=> 익스플로러 11이상부터 지원
=> 10이하 호환성 유지 필요는 사용 X
=> 만약 접근하면 getAttribute() 사용
=> dataset 은 맵형태로 저장되고 console.log 로 모든 형태 출력가능- 추가질문
Q. "data-" 속성이 무엇에 좋나요?
JavaScript 프레임워크가 인기있기 전, 비표준 속성과 DOM 추가 프로퍼티 등 의 조작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 사용
이는 적절한 속성 or 요소가 없는 페이지나 APP에 사용자정의 데이터를 비공개 저장하기 위한 것
요즘에는, "data-" 속성 권장하지 않는다.
사용자가 브라우저의 inspect 기능을 사용하여 데이터 속성을 쉽게 수정가능해서
라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM 을 업데이트된 상태로 유지하는 것이 좋다.
일단 한다