[Script] 클래스로 스타일 조정 : No Jquery getElementsByClassName

jQuery 를 이용하면 id 로 가져오던 class 로 가져오던 정말 쉽다 앞에 $ 만 붙여주고 # 냐 . 냐만 보면되니까

근데 요즘 제이쿼리를 안쓰는 추세라고하니 그 추세를 조금이나마 따라가보고자 .. 찔끔찔끔 ..

 

기존에 쓰던거 안쓰려니 참 이게 뭐라고 괜히 시간소비가 되기도한다

하지만 늘 같은것만하면 언제발전하리 ..

 

getElementById("id") 는 정말 많이 봐왔어서 생소하지않은데 class로 가져오는건 좀 생소하다

 

input-clear 라는 class 를 가진 엘리먼트에 event 는 아래와 같이 붙여주면된다

var inputClass = document.getElementsByClassName("input-clear");	
    
for (var i = 0; i < inputClass.length; i++) {
  	inputClass[i].addEventListener('click', myFunction, false);
}

function myFunction(){
	alert("ㅎㅎㅎㅎㅎㅎㅎㅎ");
}

 

또한 해당 클래스를 가진 애들한테 스타일 조정해주는건 아래처럼 하면된다

// 스타일 조정은 입맛에 따라
document.querySelectorAll(".input-clear").forEach(a=>a.style.display = "none");
document.querySelectorAll(".input-clear").forEach(a=>a.style.display = "block");

querySelectorAll 를 쓴 이유는 해당 class 를 가진 모든 요소들을 가져오는것으로 

querySelector 라고만 쓰면 html 문에서 가장 첫번째 input-clear 만 가져온다