처음에 getElementById와 getElementsByClassName에 대해 배우고 사용할 때 궁금하던 것이 있다.
왜 getElementByClassName은 없지?
우선 Id는 유일한 식별자이기 때문에 element에 일대일로 매칭되지만, 동일한 class name을 가진 elements가 다수 존재할 수 있기 때문에 이렇게 사용하도록 만들어놓았을 수 있겠구나 하고 받아들였다.
아래 코드에서 두 버튼의 기능은 동일하지만,
getElementById가 아니라 getElementsByClassName을 사용하고자 하는 경우 코드를 적을 때 차이가 있다.
getElementById는 단 하나의 element가 선택이 되지만 getElementsByClassName는 한 개 이상의 element가 선택이 되므로, getElementsByClassName[i]와 같이 indexing을 해서 (즉, 몇번째 element를 꺼낼 것인지) 작성해야 한다.
(main.css)
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
(index.html)
<body>
<div id="alert" class="alert-box">
Alert Box
<button onClick="hideAlert()">Hide Alert Box</button>
</div>
<button onClick="showAlert()">Show Alert Box</button>
<script>
function showAlert() {
document.getElementById("alert").style.display = "block";
}
function hideAlert() {
document.getElementsByClassName("alert-box")[0].style.display = "none";
}
</script>
</body>