먼저, 3가지 메서드에 대해서 이론적인 내용부터 알아보겠습니다.
getElementById()란?
태그에 있는 id 속성을 이용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 메서드입니다.
해당 id가 없는 경우 null 에러가 발생합니다.
document.getElementById(id);getElementsByTagName()란?
주어진 태그 이름을 가진 요소를 반환합니다.
getElementsByTagName(name)getElementsByName()란?
문서에서 주어진 속성을 가진 요소를 반환합니다 .
getElementsByName(name)id , name을 가진 button이 있다고 가정해보겠습니다.
<body>
<input id = "idClickBtn" name = "nameClickBtn" type = "button" value = "click">
</body>
저는 button에 onclick 이벤트를 추가해보겠습니다.
이에 접근 및 제어 방식을 3가지를 통해 진행해보겠습니다.
첫번쨰로는, getElementById()을 사용해서 id를 통해 접근해보겠습니다.
window.onload = function() {
document.getElementById("idClickBtn").onclick = function() {
console.log("id 접근");
}
}두번쨰로는,
getElementsByTagName()을 사용해서 tag를 통해 접근해보겠습니다.
window.onload = function() {
document.getElementsByTagName("input")[0].onclick = function() {
console.log("input 태그 접근");
}
}세번쨰로는,
getElementsByName()을 사용해서 name을 통해 접근해보겠습니다.
window.onload = function() {
document.getElementsByName("nameClickBtn")[0].onclick = function() {
console.log("name 접근");
}
}