document.getElementById("lightMode_btn").addEventListener("click", function () {
document.getElementById("darkMode_btn").src = "./img/dark.png";
document.getElementById("lightMode_btn").src = "./img/light.png";
document.querySelector("body").style.background = "white";
document.querySelector("body").style.color = "black";
});
document.getElementById("darkMode_btn").addEventListener("click", function () {
document.getElementById("darkMode_btn").src = "./img/dark(dark).png";
document.getElementById("lightMode_btn").src = "./img/light(dark).png";
document.querySelector("body").style.background = "black";
document.querySelector("body").style.color = "white";
});위의 자바스크립트코드로 다크모드를 구현하게 되었는데, 상세하게 풀어서 찾아보자면
getElementById - 태그에 있는 Id속성을 사용하여 해당 태그를 지정하고 싶을 때 사용
즉 html코드에서
<img src="./img/light.png id="lightMode_btn" />
<img src="./img/dark.png id="darkMode_btn" />id를 부여하였기 때문에 document 즉 문서에서 해당태그를 찾을 때 사용하는 코드라고 생각하면 된다. 괄호 안에는 darkMode_btn이 일단 컴퓨터 언어로는 글자이기 때문에 ""안에 넣어줬다 생각하면 된다. 당장은 darkMode_btn이 아무런 효과도 지정되어 있지 않은 글자이기 때문이다
addEventListenr() - document의 특정태그를 찾았다면 거기에 event ex)click하면 함수를 실행하라 같은걸 등록할 때 사용한다
지금은 뒤에 ("click", function())을 넣었는데 해당 의미는 마우스로 클릭하였을 경우, function 즉 함수가 실행되게 만들었다 볼 수 있다.
아래쪽 코드를 살펴보면, lightMode_btn일때 혹은 darkMode_btn일때 src를 따로 따로 지정해줬다. 왜냐하면 배경화면이 바뀌면 이미지 색상도 바뀌어야하기 때문이다 마치 글씨색 지정해주는 것처럼.
querySelector같은 경우 getElementById와 같이 요소를 찾을 때 사용한다(id,name,class,html 등)
그러면 get은 Id만 찾아주고 query는 다양한 요소를 찾아주는데 생산성에서 더 적합하지 않나라고 생각이 당연히 들 수 있지만 코딩 속도가 getElementById가 좀 더 뛰어나다
리턴타입에서 get은 HTMLCollection을 query는 Nodelist를 리턴하는데,
HTMLCollection은 name,id,index번호로 접근 가능하지만,
Nodelist는 index번호로만 접근이 가능하기 때문에, 좀 더 느리게 된 이유다
그래서 좀 더 구체적인 element(요소)를 찾기 위해 body를 찾을 땐 query를 입력하였고,
라이트모드,다크모드의 백그라운드 글씨 컬러를 지정해주어서 다크모드를 구현할 수 있었다.
버튼이 하나였다면 css에서 if else를 사용하여 배경과 글씨 색상을 지정해주어서 좀 더 간단히 다크모드를 구현하였겠지만, 지금은 src 2개로 만들었다보니, js가 더 적합했던 것 같다.
