javaScript_노마드코더

getElementById()

document.getElementById('아이디명') 을 통해 html 속성값을 가져올 수 있음
후에

document.getElementById('아이디명').innerText를 통해 텍스트를 변경할 수 있음

querySelector()

document내의 속성값을 css selector형식 접근하여 찾을 수 있음

const title = document.querySelector(".hello h1");

querySelector는 여러개의 결과값이 search되도 first(첫번째)것만 return됨

const title = document.querySelector(".hello h1:first-child");

-> hello클래스의 h1중 첫번째 원소의 속성 값을 가져온다

querySelectorAll()

search된 모든 속성값 찾기

const title = document.querySelectorAll(".hello h1");

addEventListener

마우스 이벤트 동작

function handleTitleClick(){
	title.style.color = "blue";
}

title.addEventListener("click", handleTitleClick);

클릭으로 배경상태 변경하기

function handleTitleClick(){
	if(h1.style.color === "blue"){
    	h1.style.color = "tomato";
    }else {
    	h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick);

하지만 이 방법은 Javascript에서 직접 css를 수정하기 때문에 좋은방법은 아니다.

그렇다면 좀 더 좋은 방법으로 넘어가본다면
참고 CSS

h1 {
    color : cornflowerblue;
}

.active {
    color : tomato;
    transition : color .5s ease-in-out;
}

function handleTitleClick(){
	if(h1.className === "active"){
    	h1.className = "";
    }else{
    	h1.className = "active";
    }
}

하지만 이 방법조차도 className의 이름을 직접 다루고 있기때문에 변수로 저장하는 것이 좋다.

function handleTitleClick(){
	const clickedClass = "active";
  if(h1.className === clickedClass){
    	h1.className = "";
    }else{
    	h1.className = clickedClass;
    }
}

위의 코드는 어느정도 괜찮은것 처럼 보인다. 하지만 이 코드의 문제점은 기존의 class가 있다면

위와같이 기존의 존재하던 "active" 부분이 사라지면 문제가 생길수도 있다는 것이다.

그걸 해결하기 위해 classList를 사용한다.

function changeColor(){
    const clickClass = "clicked";
    if(h1.classList.contains(clickClass)){
        h1.classList.remove(clickClass);
    }else{
        h1.classList.add(clickClass);
    }
}

classList의 내장메소드로 contains을 통해 class가 존재하는지 파악하고
add와 remove를 통해 해당 클래스만 제거하고 추가하여 사용할 수 있다.

하지만 이 방법보다 더 쉬운방법이 내장메소드로 있다.

toggle

function changeColor(){

    h1.classList.toggle("clicked");
}

이 한줄로 위의 다섯줄이 넘어가는 코드를 대체할 수 있다.

toggle은 class가 존재하는지 파악하고 있으면 제거하고, 없으면 추가해주는 기능이있다.