[spa] getElementsByClassName 로 불러와서, class명 변경하기

현재 프로젝트를 spa 방식으로 만드는 중인데,

쿼리셀렉터를 이용해서 가져오려고 하니 함수(openModal) 밖에 선언을 하니 값이 불러와지지 않았다.

( 사실 나중에 보니 openModal 안에

const modalQuery=document.querySelector('modal')

를 넣으니 되기는 됐는데, 왜 그럼 getElementByClassName은 밖에서 불러와졌는지가 궁금해서 튜터님께 질문하러 가야징!)

 

아무튼 getElementsByClassName 로 불러오니 콘솔창에는

이렇게 값이 떴고, 여기에다가 바로 이런식으로 먹이려고 했는데

modalClassName.classList.add("hidden");

 

먹지 않았다. 

임의의 div를 만들어서 getElementById로 호출하여 콘솔창에 와 찍히는 결과값의 차이를 분석해봤다.

getElementById 로 불러왔을때는 콘솔창에 결과값이 <div id="테스트중"></div> 이런식으로 찍혔는데,

getElementsByClassName 로 불러왔을 땐 날것(?)의 태그가 찍히지 않고, HTMLCollection(1)이라고 찍히는 것의 차이를 볼 수 있었다.

 

나는 뭔가 저렇게 생겨먹은건 그 안에 있는 것들을 추출해야 하지 않을까 생각을 했고 열심히 구글링을 했당.

 

HTMLCollection 는 요소의 문서 내 순서대로 정렬된 일반 컬렉션( arguments 처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공하는 인터페이스였던 거시돠!!!!!!

 

아래 방법처럼 for문을 통해 각 class의 className을 원하는 클래스 이름으로 바꿔주면 되는 거시었다~~~

const modalClassName = document.getElementsByClassName('modal')

export const openModal = () => {
  for (let i = 0 ; i < modalClassName.length ; i ++ ) {
    modalClassName[i].className = "modal"
  }
};