2021-04-15
자바스크립트 코드에서 getElementById("id")를 사용하면 html 태그 내에 해당 id를 가지고 있는 태그를 불러와 요소 객체로 반환할 수 있게 된다. 즉 이를 통해 css 속성을 부여하거나 이벤트를 부여하는 등 다양한 기능을 추가할 수 있다.
- getElementById("id")
우선 getElementById() 로 가지고 온 id 객체를 콘솔 창에 출력해 보도록 하자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById("div1")
console.log(div1)
}
</script>
</head>
<body>
<div id="div1">Hello World1</div>
<div id="div2">Hello World2</div>
</body>
</html>
div1의 아이디를 getElementById() 메소드를 이용해 하나의 변수에 담은뒤에 출력해보면 아래와 같이 태그 정보가 저장된 것을 확인할 수 있다.
- getElementById() 스타일 부여
이제 추출되어 div 태그가 담긴 변수에 스타일을 부여해 보도록 하자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById("div1")
div1.style.color = "red"
}
</script>
</head>
<body>
<div id="div1">Hello World1</div>
<div id="div2">Hello World2</div>
</body>
</html>
해당 변수에 글씨색을 변경하는 color를 이용해 빨간색으로 변경해보면, div1 태그의 글씨 색상이 변경되는 것을 확인할 수 있다.
- getElementById() 축약문
var div1 = document.getElementById("div1")는 사실 하나의 태그 id를 추출하는 메서드 치고는 상당히 길다고 느껴질 수 있다. 때문에 이를 개선하기 위해 축약문이 존재하는데, id를 getElementById()로 꺼낼 필요없이, 바로 태그의 id를 사용해도 document 객체로 사용할 수 있다. 아래의 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
// document.getElementById 사용
var div1 = document.getElementById("div1")
div1.style.color = "red"
// 바로 id를 사용
div2.style.color = "blue"
}
</script>
</head>
<body>
<div id="div1">Hello World1</div>
<div id="div2">Hello World2</div>
</body>
</html>
결과를 확인해보면 document.getElementById("div1") 와 같이 직접적인 메서드를 사용하지 않고도 단순 태그 id 만을 이용해서 document 객체로 사용할 수 있는 것을 알 수 있다.
메인 이미지 출처: Photo by Samuel Regan-Asante on Unsplash