[개발 Dev] [] 사용법 / 대괄호 선택자 / 비표준속성 활용하기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 대괄호선택자[] 사용 방법에 대해 다뤄볼게요!

 

<-- html -->
<p>할 일 : <b field="title"></b></p>
<p>담당자 : <b field="title"></b></p>
<p>상태 : <b field="title"></b></p>
<div>
   <button class="btn" status="공부중">뚝딱 공부중</button>
   <button class="btn" status="개발중">뚝딱 개발중</button>
</div>

<-- css -->
[status] {
   padding : 5px;
}

[status="개발중"] {
   background-color: yellow;
}

• [속성이름] : 대괄호를 이용하면 대괄호 안에 있는 속성 이름을 가진 태그들을 선택할 수 있습니다.
• [속성이름="값'] : 속성이름에 해당 값을 가진 태그들을 선택할 수 있습니다.

 

 

 

 

   1
선택자로 활용

const fields = document.querySelectorAll('[field]');

 

 

 

  2
값을 표시할 태그를 구분할 때 활용

비표준 속성은 객체 형태의 데이터가 있을 때, 각 프로퍼티 값들이 들어갈 태그를 구분하는데 활용할 수 있어요.

const task = {
   title : '뚝딱이 코딩한다',
   manager : 'TookTak, DoeGgaeBee',
   status : '',
};

for (let tag of fields) {
   const field = tag.getAttribute('field');
   tag.textContent = task[field];
}

 

 

 

 

  3
스타일이나 데이터 변경에 활용

• getAttribute 메소드를 활용해서 속성값을 가져오고, setAttribute 메소드를 활용해서 속성값을 설정해주는 원리로
  이벤트를 통해 실시간으로 스타일을 변경하거나 데이터를 변경하는데 활용할 수 있어요.
• 때로는 class를 다루는 것보다 setAttribute로 비표준 속성을 변경하는 게 스타일을 다루기에 오히려 편리한 경우도 있습니다.

const fields = document.querySelectorAll('[field]');
const task = {
   title : '뚝딱이 코딩한다',
   manager : 'TookTak, DoeGgaeBee',
   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 =function () {
      fields[2].textContent = status;
      fields[2].setAttribute('status', status);
   };
}

 

 

 

 

  4
비표준 속성을 활용해야 할 때,
data-* 형태와 dataset 프로퍼티를 사용하는 것이
조금 더 안전하다는 것을 기억해 주세요!