Javascript 데이터 속성 dataset (공부_4)

이번에는 데이터 속성인 dataset에 대하여 학습했고 그 내용에 대해 적어 보려고 한다.

 

 

dataset

• HTML

<h2 data-test="hello test">Hello Javascript</h2>

---> data- 다음에 test, tooltip, example 등의 속성명을 쓰면 되고 그 뒤에 오는 속성값을 읽거나 수정할 수 있음

• Javascript

let h2 = document.querySelector('h2');
h2.dataset.test = 'hellow Javascript'; // 변경
console.log('h2.dataset.test: ', h2.dataset.test); // 출력

---> dom 요소의 dataset이라는 속성을 통해서 접근할 수 있고 쓸 때에는 = 연산자를 통해서 사용할 수 있음

 

 

 

정리

• dataset을 쓰기 위해서는 HTML에서 data-속성명-속성값 형태로 작성해야 한다.
• 이후 Javascript에서 dom 요소를 가져와 dataset 속성을 통해 접근한다.
• 접근 후에 값을 변경하던지 출력하던지 본인이 원하는 대로 사용한다.

 

 

 

느낀점

이번 시간에는 데이터 속성의 개념과 사용 방법을 배워서 큰 어려움은 없었다. 앞에서 배웠던 내용들을 활용하면서 dataset을 익혔는데 이 과정을 통해 자바스크립트 문법들이 더 익숙해졌다. 오늘은 이거 하나만 배워서 쉽게 느껴졌지만 앞으로 더 많고 어려운 내용들이 있을 테니 더 열심히 공부해야겠다.