[JavaScript] JS GetElementById() 이용한 아이디 요소 객체 선택

Home » What Is Getelementbyid In Javascript » [JavaScript] JS GetElementById() 이용한 아이디 요소 객체 선택

Maybe your like

2021-04-15

Photo by Samuel Regan-Asante on Unsplash

자바스크립트 코드에서 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

Tag » What Is Getelementbyid In Javascript