틀린 코드로 알아보는 getElementById vs getElementsByClass

개발.log·2021년 9월 5일

JavaScript getElementById getElementsByClassName getElementsByClassName

오늘의 문제

처음 내가 푼 풀이

html

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인"/>
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
      <script src="index.js"></script>
    
  </body>

</html>

js

const thisIsPw = document.getElementById('password');
const thisIsRePw=document.getElementById('re-password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsRePw.addEventListener('keyup',myPassword);

function myPassword(){
 if(thisIsPw.value===thisIsRePw.value){
   document.getElementsByClassName('alert').innerText=" "
}else{
  document.getElementsByClassName('alert').innerText="비밀번호가 일치하지 않습니다."
}
};

분명 값은 잘 들어오는데.. "비밀번호가 일치하지 않습니다."가 절대 안뜨는거다. 난 코드를 맞게 짯다고 생각했다.!

건방지게 레플잇을 의심해서 프로그램이 실행 못하는건가하고 VScode로 옮겨서도 실행해봤다^^;; 역시나 프로그램이 틀렸을리는 없고^^..

친구가 보내준 짤인데 너무 짜증나지만 너무 맞말^^ㅋㅋㅋㅋㅋㅋㅋㅋ 분명 내가 어딘가 잘못 짯겠지 ^^..
다시 찬찬히 살펴보자.

값이 들어오는걸 보면 keyup 함수도 맞게 들어왔고, addEventListener 부분과 value는 문제 없는 것같다. 그럼

   document.getElementsByClassName('alert').innerText=" "
  document.getElementsByClassName('alert').innerText="비밀번호가 일치하지 않습니다."

이 부분에 값이 안들어 가는거 같은데,,,alert 부분을 id 식별자로 바꿔보자.

바꾼코드

html

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인"/>
      <button class="login-btn">로그인</button>
      <p id="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
      <script src="index.js"></script>
    
  </body>

</html>

js


const thisIsPw = document.getElementById('password');
const thisIsRePw=document.getElementById('re-password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsRePw.addEventListener('keyup',myPassword);

function myPassword(){
 if(thisIsPw.value===thisIsRePw.value){
   document.getElementById('alert').innerText=" "
}else{
  document.getElementById('alert').innerText="비밀번호가 일치하지 않습니다."
}
};

엥?? 정상작동...? 운좋게 답은 알겠는데 도대체 왜그랬대?
getElementById, getElementsByClassName 차이가 뭘까? 자세히 알아보도록하자!

이름에서도 알 수 있듯이 Id는 Element고 Class는 Element"s" 다.
따라서, Id값은 고유하고, Class는 여러개가 들어올 수 있는 것이다.
콘솔에 찍어보면,

Id는 innerText안에 값으로 바로 들어가지만,
Class는 배열처럼 동작하는 HTMLCollection 객체를 반환한다. 따라서 getElementsByClassName를 쓰려면,

 if(thisIsPw.value===thisIsRePw.value){
   document.getElementsByClassName('alert')[0].innerText=" "
}else{
  document.getElementsByClassName('alert')[0].innerText="비밀번호가 일치하지 않습니다."
}

이런식으로 몇번째 요소인지를 붙인 코드를 작성 해줘야 된다.
MDN에도 잘 나와있는 내용 MDN | getElementsByClassName

문제에서도 Id가 아닌 .alert Class에 문구를 넣어주라고 요구 했으므로,
최종적인 정답 코드로 바꿔보면

최종코드

html

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인"/>
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
      <script src="index.js"></script>
    
  </body>

</html>

js

const thisIsPw = document.getElementById('password');
const thisIsRePw=document.getElementById('re-password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsRePw.addEventListener('keyup',myPassword);

function myPassword(){
 if(thisIsPw.value===thisIsRePw.value){
  document.getElementsByClassName('alert')[0].innerText=" "
}else{
  document.getElementsByClassName('alert')[0].innerText="비밀번호가 일치하지 않습니다."
}
console.log(thisIsPw.value)
console.log(thisIsRePw.value)
};