문서 객체 가져오기
정적인 HTML 를 자바스크립트를 사용하여 동적으로 가져온다.
getElementById(id)
매개변수 id가 태그 속성의 id와 같은 값일 때 문서 객체를 가져온다. 한번에 하나씩만 가져올 수 있다.
getElementsByName(name)
매개변수 name가 태그 속성의 name과 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다.
getElementsByTagName(tag)
매개변수 tag가 태그 와 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다.
querySelector(선택자)
가장 처음 선택되는 문서 객체를 가져온다.
(#id)에서 id와 같은 id를 가진 태그를 찾는다.
querySelectorAll(선택자)
선택자로 선택되는 문서 객체 모두를 배열로 가져온다.
(.class)에서 class와 같은 class를 가진 태그를 찾는다.
※ 주의 : getElementsByName(name) 과 getElementsByTagName(tag)는 배열이지만 for in 반복문은 다른 속성까지 접근하기 때문에 사용하면 안된다. for() 반복문을 이용해야 한다.
위 문서 객체 가져오기 5가지를 사용해 보자.
<html> <head> <title>문서 객체 가져오기</title> <script> window.onload = function(){ // getElementById(id) - 매개변수 id가 태그 속성의 id와 같은 값일 때 문서 객체를 가져온다. 한번에 하나씩만 가져올 수 있다. var bodyId01 = document.getElementById('body01'); var bodyId02 = document.getElementById('body02'); // getElementsByName(name) - 매개변수 name가 태그 속성의 name과 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여려개 있으면 배열로 가져온다. var arrayCity = document.getElementsByName('city'); // getElementsByTagName(tag) - 매개변수 tag가 태그 와 같은 값일 때 문서 객체를 가져온다. - 동일한 값이 여러개 있으면 배열로 가져온다. var arrayTagName = document.getElementsByTagName('b'); // querySelector(선택자) - 선택자로 가장 처음 선택되는 문서 객체를 가져온다. // querySelector(#id)에서 id와 같은 id를 가진 태그를 찾는다. var querySelector01 = document.querySelector('#country01'); // querySelectorAll(선택자) - 선택자로 선택되는 문서 객체 모두를 배열로 가져온다. // querySelectorAll(.class)에서 class와 같은 class를 가진 태그를 찾는다. var querySelectorAll = document.querySelectorAll('.country'); // 각자 불러온 문서 객체의 텍스트 노드를 변경해 본다. for(var i=0;i<arrayCity.length;i++){ arrayCity[i].innerHTML = 'getElementsByName[' + i + '] 번째 접근 입니다.'; } bodyId01.innerHTML = 'getElementById("body01")로 접근'; bodyId02.innerHTML = 'getElementById("body02")로 접근'; for(var i=0;i<arrayTagName.length;i++){ arrayTagName[i].innerHTML = 'getElementsTagName[' + i + '] 번째 접근 입니다.'; } querySelector01.innerHTML = 'querySelector()로 접근.' for(var i=0;i<querySelectorAll.length;i++){ querySelectorAll[i].innerHTML = 'querySelectorAll[' + i + '] 번째 접근 입니다.'; } }; </script> </head> <body> <p id='body01'>대구</p> <p id='body02'>울산</p> <p name='city'>광주</p> <p name='city'>수원</p> <p name='city'>천안</p> <b>서울</b><br> <b>부산</b><br> <b>인천</b><br> <p id='country01'>일본</p> <p class='country'>중국</p> <p class='country'>미국</p> </body> </html>
출력
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 (1) | 2023.11.24 |
|---|---|
| [자바스크립트] 예외 처리 - try catch finally 문 (2) | 2017.08.30 |
| [자바스크립트] window.moveBy() window.moveTo() - window 이동하기 (0) | 2017.08.28 |
| [자바스크립트] Date 객체 및 D-day(디데이 날짜 및 시간 계산 (1) | 2017.08.27 |
| [자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML() (0) | 2017.08.25 |
댓글