[Javascript] HTML 요소의 'data 속성' 값 가져오는 법.

HTML의 'data' 속성이란?

- 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공해주는 속성

- 'data'속성은 접두사를 가진 속성으로, 해당 요소와 관련된 정보를 HTML에서 마크업 할때 사용. 

ex) 'data-'

- 보통 이러한 데이터는 javascript나 css에서 사용 될 수 있다.

 

---

'data'속성의 일반적인 형식

<div data-key="value">my key</div>

위의 코드에서 data- 접두사 뒤에붙는 'key'는 사용자가 작명한 이름이고 value는 그에 해당되는 데이터 값이다.

이 데이터값은 HTML 요소에서는 보이지 않지만 Javascirpt나 CSS를 통해 접근 할 수 있다.

 

---

javascript로 'data'속성 값 접근하기

1.getAttribute() 메소드 사용

const MY_KEY_EL = document.querySelector("div[data-key='value']");
const EL_KEY_VALUE = MY_KEY_EL.getAttribute('data-key');

console.log(EL_KEY_VALUE);

 

2. dataset 사용

const MY_KEY_EL = document.querySelector("div[data-key='value']");
const EL_KEY_VALUE = MY_KEY_EL.dataset.key;

console.log(EL_KEY_VALUE);

---

리스트 요소가 'data'을 가졌을때 클릭한 요소의 data속성 값만 가져오기

<ul>
    <li data-id="1">1</li>
    <li data-id="2">2</li>
    <li data-id="3">3</li>
    <li data-id="4">4</li>
    <li data-id="5">5</li>
</ul>

const MY_LIST_EL = document.querySelectorAll("li")

MY_LIST_EL.forEach( (el) => {
	el.addEventListener("click", () => {
    	let elDataId = el.dataset.id;
        
        console.log(elDataId);
    });
    
});