사용법
document.getElementById(id);에 해당 element 의 id를 넣음으로 사용
반환값
주어진 id와 일치하는 dom 요소를 나타내는 Element 객체를 반환하거나
주어진 id와 일치하는 dom 요소가 없으면 null을 return 한다
예시
<!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의 아이디를 getElementByld() method를 이용해 하나의 변수에 담은후 출력하면
아래와 같이 태그 정보가 저장된 것을 확인
<div id="div1">Hello World1</div>getElementByld() 축약문
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 객체로 사용할 수 있는 것을 알 수 있다.
'개발' 카테고리의 다른 글
| API란 ? (0) | 2022.11.21 |
|---|---|
| JWT토큰 이란 ? (0) | 2022.11.20 |
| 원형 이미지 css html (0) | 2022.11.02 |
| Hash 함수, SHA256 (0) | 2022.10.20 |
| 오류 - Uncaught SyntaxError: Unexpected token '{' (0) | 2022.10.13 |
댓글