23-05-30 T.I.L querySelectorAll(#id), 노드배열 리스트 화

문제설명

영화api를 통해서 얻은 영화 제목들을 리스트화 하고 싶었는데 undefined만이 console.log에 떳다.

getElementById(" ")로 영화제목의 태그 아이디를 넣으면 영화 제목이 뜰거라고 생각했지만 아니었다.

 

시도

왜 undefined가 나왔는지 생각해봤다. 왜냐하면 

const movie_list=
     document.getElementById("movie_title")

나는 정의를 했으니까, undefined, 정의되지 않았다. 뭔가 잘못되었다.

아직 getElementById(" ")에 대한 이해도가 부족했을까, 나는 이와 비슷한 기능인 querySelectorAll()을 통해서도 한번 해보았다. 결과는 console.log(movie_list) = undefined..뭐라도 떠야할텐데 왜 안 뜰까 생각하면서 내가 지금까지 사용했던 querySelectorAll()문을 살펴보던 중 깨달았다. 아이디값에는 #이 필요하다는 것을

해결

const movie_list=
     document.getElementById("#movie_title")

나온다, 뭔가 나왔다. undefined가 아니다. 하지만 console.log에서 Node배열이라고 떳다. 처음 본 타입이었기 때문에 구글에 검색을 했더니 함수로 따온 여러 값들은 자동으로 배열의 형태를 가지게 되는데 이것이 노드배열이라고 했다.

현재 이 노드배열의 상태로는 아무것도 할 수가 없어서 배열의 내용을 html로 바꿔주는 innerHTML을 사용해야겠다는 생각이 들었다.

 

그리고 여러값을 가진 배열을 보면 뭐가 하고 싶다?

forEach가 하고싶다.

const movie_name=
   document.querySelectorAll("#movie_title")
movie_name.forEach((a)=>{
  let movie_list=a.innerHTML}

이 과정을 통해서 영화제목의 리스트를 얻을 수 있었다.

알게된 점

querySelectorAll()를 사용할때 가져오는 값이 Id값이라면 꼭 #을 붙혀주자

querySelectorAll()로 가져온 리스트는 그냥은 사용할 수 없다. 자바스크립트에서 사용할 수 있도록

innertaxt나 innerHTML을 사용해서 리스트를 다시 짜야한다.