RadioButton 클릭 시 SelectBox 비활성화 하기 / 'querySelector' 와 'getElementById' 차이 ✨

이거쓰다가눈에콜라튀었다ㅠㅠ

라디오 버튼 클릭시, 종류에 따라 드롭다운이 비활성화 돼야 하는 기능을 개발해야 했다.
처음에는 당연히 쉽겠지~ 생각 했으나 막상 손으로 타이핑하려니 잘 안 됐던!

자주 사용할 수 있을 것 같으니 작성 해두겠다. 👽

---

🔽 작성 코드

function select_change() {

	if(document.querySelector('input[id="radio_0"]').checked) {

      document.getElementById('select').disabled = true;
   
	}else if(document.querySelector('input[id="radio_1"]').checked ) {
   
      document.getElementById('select').removeAttribute('disabled');
      document.getElementById('select').disabled = false;
  
  	} 
}

---

🙌 아! 그전에
HTML에서 'id'와 'name'의 차이를 간단히 말해보자면!

id => 고유한 값, 주로 JavaScript에서 활용하기 위해 사용됨.
name => 중복 사용 가능, action에 해당하는 페이지로 전달하는 파라미터

라고 한다.

이번에 내가 알게된 것은 바로 'removeAttribute' 메서드!
원하는 요소에서 특성을 제거해주는 메서드이다.
해당 메서드를 사용해서, 원하는 라디오 버튼이 체크 되었을 때 셀렉트 박스를 비활성화 할 수 있었다.
disabled 뿐 아니라 다른 특성을 제거할때도 유용할 듯 🙌

---

글을 작성하며 또 궁금해진 ... 'querySelector' 의 정체 ...!
'getElementById' 와 차이점을 검색해보았다.

⭐ querySelector => 선택자와 일치하는 첫번째 엘리먼트 객체를 반환
⭐ getElementById => id 명과 일치하는 엘리먼트 객체를 반환

둘 다 일치하는 엘리먼트가 없다면 null을 반환 한다.

보통 querySelector 는 잘 사용하지 않는다고 한다.
사용 방법도 다르지만 성능에서 차이가 있다고 한다...!

---

오늘도 잘 먹고 갑니당 ~