data attribute / dataset / getAttribute()

사용자 정의 속성 활용

 

    <a href="https://www.naver.com/" target="_blank" data-link="네이버">네이버 바로가기</a>

    <p class="text" data-color="red" data-text-size="20px">나는 레드</p>

 

 

html 코드에 위 코드와 같이 data-* 을 사용하여 사용자정의 속성을 추가할 수 있다.

 

사용자 정의 속성 가져오기 (data-*)

data-* 은 두 가지 방법으로 가져올 수 있다.

dataset 프로퍼티와 getAttribute()이다.

 

1. dataset 프로퍼티

data-text-size와 같이 - (대시)가 두 번 연달아 있을 경우에는 카멜케이스를 사용하여 가져올 수 있다.

const $p = document.querySelector('.text');

console.log($p.dataset.color); //red
console.log($p.dataset['color']); //red

console.log($p.dataset.textSize); //20px
console.log($p.dataset['textSize']);//20px

 

2. getAttribute() 

선택한 요소의 특정 속성 값을 가져옵니다

const $p = document.querySelector('.text');
console.log($p.getAttribute('data-text-size')); //20px

const $a = document.querySelector('a');
console.log($a.getAttribute('target')); //_blank

 

dataset 프로퍼티와 getAttribute() 둘 다 속성을 가져온다는 점이 같아 보지 이만, dataset 은 data-* 로 지정된 값만 가져올 수 있다.

dataset 맵으로 따로 모아서 관리하기 때문이다.

만약 dataset 미지원 브라우저라면 getAttribute() 로만 가져와야 한다.

 

사용자 정의 속성을 활용하여 요소 가져오기

querySelector(), querySelectorAll()을 사용하여 특정 속성을 가지는 요소를 가져올 수 있다.

일반 속성과 사용자 정의 속성 둘 다 사용 가능하다.

const text = document.querySelector('p[data-color]');
console.log(text)

const $a = document.querySelector('[target]');
console.log($a);

결과

---

느낀 점

오늘은 팀 프로젝트 발표가 끝나고 팀원들끼리 코드 리뷰를 했다. 

새로 알게 된 부분들도 있었고, 내가 이 코드는 왜 이렇게 작성했는지 또는 이 부분은 무슨 기능을 하는 건지에 대해서 받은 질문에 대한 답변으로 설명을 하는데 내가 너무 설명을 못한다는 기분이 들었다.

설명을 잘하는 것도 중요하다고 느꼈다.

 

이렇게 첫 프로젝트가 끝났고, 첫 프로젝트인 만큼 기억에 남을 것 같다.

다음 프로젝트는 좀 더 공부를 열심히 해서 많이 기여해야겠다.

 

끝으로는 귀엽게 모여있는 우리팀