231020) TIL #4 DOM

오늘은 개인 프로젝트 영화검색 웹사이트 만들기 중 알게되거나 헷갈렸는데 이해된 개념들을 몇 가지 적어본다.

 

 

const movieList = document.getElementById("movie-list");

1.document.getElementById()

document는 웹페이지 DOM을 나타내는 JS 객체다. HTML 문서의 구조와 요소에 대한 표현을 제공함

.getElementById()는 ()안의 ID를 가진 HTML 요소를 찾는 역할을 한다.

쉽게 생각해서 예시를 보자면, movie-list라는 id를 가진 html 요소를 웹페이지에서 찾아서

그것을 변수 movieList에 저장하는 것. 이렇게 하면 나중에 js에서 'movieList'변수를 사용해 해당 html 요소에 접근할 수 있게 된다!!<=이것이 뽀인트

 

 

const movies = document.querySelector(".movies");

2. document.querySelector(".")

querySelector(".") 은 html 문서 내에서 특정 css 클래스명이 movies인 첫번재 요소를 선택함

매칭되는 첫번째 요소를 선택하고 일치하지 않으면 null이라 뜸.

선택된 요소를 movies 변수에 할당하면 나중에 js 코드에서 movies 변수를 사용해 해당 html요소에 대한 작업을 할 수 있음. 주의할 것은 css 선택자를 사용하는 것이기 때문에 괄호 안에 꼭 . 을 넣어야함.

 

3. .addEventListener

 

title.addEventListener("click", () => { location.reload(); });

 

클릭하면 ~~한 기능이 나옵니다~ 느낌쓰. 이번 개인 프로젝트에서 타이틀 화면을 클릭하면 새로고침하는 기능으로 넣음.

 

   movieBox.addEventListener("click", () => {
        alert(`선택한 영화의 ID는 ${movie.id}입니다.`);
      });

또, 필수적으로 구현해야 할 기능 중 하나가 무비 포스터를 클릭하면 id가 뜨게 해야하는 기능이 있어서 addEventListener를 썼다. 첫번째 예문에서는 클릭하면 새로고침이고 이번 구문은 알림이 뜨게 하는 기능이다.

 

 

개인 프로젝트 중 알게되는 것이 바다만큼의 양이라면 내 머리는 겨우 라면 그릇 정도라 마치 지식의 홍수를 내 머리로 들이붓는 느낌이다. 살려주세요