HTML 요소에는 일반적으로 사용하는 class, value, id 등과 같은 표준 속성 이외에 개발자가 임의로 작성하는 비표준 속성들이 있다. 이것에 대해서 간단히 살펴보자.
비표준 속성
아래의 예시를 보자. field와 status는 임의로 넣은 비표준 속성이다.
<body> <p>할 일: <b field="title"></b></p> <p>담당자: <b field="manager"></b></p> <p>상태: <b field="status"></b></p> <div> 상태 변경: <button class="btn" status="대기 중">대기중</button> <button class="btn" status="진행 중">진행 중</button> <button class="btn" status="완료">완료</button> </div> </body>
비표준 속성을 선택자로 사용하기 위해서는 대괄호([])를 이용하면 된다.
const fields = document.querySelectorAll('[field]'); console.log(fields);
활용
비표준 속성은 객체 형태의 데이터가 있는 경우, 각 property 값들이 들어갈 태그를 구분하는데 활용할 수 있다.
const fields = document.querySelectorAll('[field]'); const task = { title: '아날로그 시계 개발', manager: 'Sam Lee', status: '', }; for (let tag of fields) { const field = tag.getAttribute('field'); tag.textContent = task[field] }
그리고 데이터 변경에도 사용할 수 있다.
const btns = document.querySelectorAll('.btn'); for (let btn of btns) { const status = btn.getAttribute('status'); btn.onclick = () => { fields[2].textContent = status; fields[2].setAttribute('status', status); }; }
버튼으로 각 task의 status를 바꾸고 status 속성을 추가하는 코드이다.
문제점
이렇게 다양하게 활용이 가능한 비표준 속성이지만 문제가 있다. 만약 HTML에서 개발자가 작성한 비표준 속성과 동일한 이름으로 표준 속성이 만들어 진다면, 임의로 작성한 비표준 속성은 동작하지 않게 된다. 이러한 문제를 해결하기 위해서 data-*로 비표준 속성을 작성하면 된다.
<p>할 일: <b data-field="title"></b></p> <p>담당자: <b data-field="manager"></b></p> <p>상태: <b data-field="status"></b></p> <div> 상태 변경: <button class="btn" data-status="대기 중">대기중</button> <button class="btn" data-status="진행 중">진행 중</button> <button class="btn" data-status="완료">완료</button> </div>
해당 속성에 접근하는 방법은 element.dataset.*이다.
const fields = document.querySelectorAll('[data-field]'); const task = { title: '아날로그 시계 개발', manager: 'Sam Lee', status: '', }; for (let tag of fields) { const field = tag.dataset.field; tag.textContent = task[field]; } const btns = document.querySelectorAll('.btn'); for (let btn of btns) { const status = btn.dataset.status; btn.onclick = () => { fields[2].textContent = status; fields[2].dataset.status = status; }; }
document.querySelectorAll('[data-field]')으로 요소 선택, tag.dataset.field로 data-field라는 비표준 속성 접근, btn.dataset.status로 button의 비표준 속성으로 접근하여 이전과 동일하게 동작하는 코드를 만들어냈다.
마무리
dataset을 활용하는 것이 익숙하지 않아 블로그로 작성했다. 다양하게 활용이 가능한 방식이니 여러 방법으로 활용하는 것을 공부해서 내 것으로 만들어야겠다. 혹시 틀린 부분이 있으면 언제든 지적 부탁바란다. 난 개린이니까.
