자바스크립트를 이용해 웹페이지안의 모든 요소들을 (DOM요소) 선택하는 방법에 대하여 알아보려합니다. 먼저 가능한 방법으로 아래의 방법들이 있습니다.


하나, DOM(문서객체모델) API 방법


document.getElementById();
document.getElementsByClassName();
document.getElementsByTagName();


둘, 선택자 API를 이용한 방법


document.querySelector()
위 메소드는 해당하는 첫번째 요소만 반환하며 만약 일치하는 요소가 없는 경우 null값을 반환합니다. 만약, 하나가 아닌 해당하는 모든 요소를 포함시키려면 아래의 메소드를 사용합니다.

document.querySelectorAll()
위 메소드는 해당하는 모든 요소를 반환하게됩니다.

위 방법들은 CSS 및 jQuery를 아는 사용자에게는 매우 친숙할 것입니다. 요소의 선택 방법이 CSS선택자나 제이쿼리 씨즐러 엔진 선택자와 매우 비슷합니다. 그럼 예제를 통해 조금 더 자세하게 알아보면...

!! 요소 선택 예제보기



<html>
<head>
<style type="text/css">
</style>
</head>

<body id='main'>
  <div class="testClass">
  </div>
</body>

<script type="text/javascript">
</script>
</html>


i. 아이디(id)가 main인 요소를 선택하기


document.getElementById('main');

document.querySelector('#main');


ii. 클래스명이 testClass인 요소를 선택하기


document.document.getElementsByClassName('testClass');

document.querySelector('.testClass');

document.querySelectorAll('.testClass');
// testClass 클래스가 한개가 아닌 다수인 경우 위 메소드 사용


iii. div태그 요소를 선택하기


document.getElementsByTagName('div');

document.querySelector('div');

document.querySelectorAll('div');
// div 태그가 복수개, 즉 한개가 아닌 다수일 경우



!!! 참고로 jQuery 및 Prototype 프레임웍(framework)의 경우


i. jQuery(제이쿼리)를 사용하는 방법



$('#main');
$('.classTest');
$('div');


ii. Prototype을 사용하는 방법



$('main'); // 아이디값만 불러올 수 있음

$$('.classTest');
$$('div');
/* CSS 선택자와 같이 요소를 선택 가능함 */