classList(속성 변경)

예를 들어 해당 클래스에 hidden 속성을 추가해 주고 싶을때,

기존에 추가로 들어있는 다른 속성들은 건드리지 않은채 hidden 만 추가 하려고 한다.

//index.html//
...
<form id="login-form">
        <input
          required
          maxlength="15"
          type="text"
          placeholder="What is your name?"
        />
        <input type="submit" value="Log In" />
</form>
      <h1 id="greeting" class="hidden"></h1>
...
/////////////


///////////// js ///////////////////////////////////////
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

console.dir(greeting);

function onLoginSubmit(event) {
    event.preventDefault();

    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    console.log(username);
//    greeting.innerText = "Hello " + username;
	greeting.innerText = `Hello ${username}`;  //위와 동일한 결과 값
    
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);
////////////////////////////////////////////////////

js 코드 내부를 보면

greeting.classList로 기존의 클래스 속성들을 가져오고 거기서 remove로 hidden만 지워주는 것을 볼 수 있다.

classList는 console.dir(greeting);를 보면 알 수 있다.

 

추가로,

문자열을 합해서 출력할때, 

"Hello " + username;  이런식으로 하는 것 보단

`Hello ${username}`;   이런식으로 나타내는게 좋다. (맥의 경우 option + 원화표시)