DOM 요소 선택하기

jQuery 를 사용하여 DOM에 있는 특정 요소를 선택하는 방법을 알아보겠습니다.
먼저 <a> 요소를 예제로 넣고 어트리뷰트 요소가 몇개가 있는지 찾아보겠습니다.
먼저 전체 예제 코드를 보겠습니다. 참고로 jquery 버젼은 최신버젼이든 예전버젼이든 작동하는데는 별문제 없으니 jquery 를 로드한다는 것만 알아두면 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/JavaScript">
     //6개의 요소가 있다고 메세지박스를 나타낸다.
     alert('페이지에 <a> 요소가 ' + $('a').length +  '개 있습니다.!');
</script>
</body>
</html>

결과.


6개의 a 요소가 있다고 메세지 창이 떴습니다.
html에는 총 6개의 a 요소가 있습니다.
우선 모든 <a>요소를 선택하도록 $('a') 를 사용했습니다. 마찬가지로 jquery('a') 로 해도 결과는 마찬가지 입니다. 
a요소가 몇개 있는지 length 속성을 사용했습니다.

jquery 는 찾고자 하는 선택요소가 더 많이 있을경우 $('a1, a2, a3, #a4, .a5').lenght 식으로 아이디건, 클래스건 쉼표로 지정하기만 하면 모두 찾아줍니다. 
 
jQuery 도 자바스크립트 이므로 아래처럼 해도 똑같은 결과를 얻을수 있습니다.

<script type="text/JavaScript">
     //6개의 요소가 있다고 메세지박스를 나타낸다.
     alert('페이지에 <a> 요소가 ' + $(document.getElementsByTagName('a')).length +  '개 있습니다.!');
</script>

 

DOM요소의 래퍼 집합 필터링하기.

CSS 표현식을 갖는 jQuery 함수는 두번째 매개변수를 가질수도 있습니다. 이 매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM요소를 찾아야 하는지를 jQuery 함수에게 알려주는 역활을 합니다.
이러한 두번째 매개변수는 DOM 참조이거나 jQuery 래퍼 또는 document 일 수도 있습니다. 
다음 예제는 총 12개의 input 요소중에서 form 요소를 기반으로 찾는법하고, 배열형식인 .form[0] 을 이용하여 input 요소를 찾는법과 body 요소를 기준으로 찾는 방법의 예제입니다.

전체 예제코드는 아래와 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/JavaScript">

 //1.컨텍스트 래퍼를 사용하여 모든 form 요소 안에서 input 요소를 찾는다. 8개의 input을 출력.
 alert('input 요소 ' + jQuery('input',$('form')).length + '개 선택');

 //2.컨텍스트로 DOM참조를 사용하여 첫번째 from요소 안에서 input 요소를 찾는다. 4개의 input을 출력
 alert('input 요소 ' + jQuery('input',document.forms[0]).length + '개 선택');

 //3.표현식을 사용하여 body요소안에 있는 모든 input 요소를 찾는다. 12개의 input을 출력. 
 alert('input 요소 ' + jQuery('input','body').length + '개 선택');

</script>
</body>
</html>

결과는 아래와 같습니다.
첫번째는 form 기준으로해서 input 요소를 8개 찾는 장면입니다.

확인을 클릭하면 document.forms[0].length 를 이용해서 첫번째 form에 있는 요소만 선택해서 4개의 input 가 선택되어진 화면입니다.



또 확인을 클릭하면 세번째인데요. body를 기준으로 모든 input 요소를 찾는 화면입니다.
input 전부인 12개 모두를 선택했습니다.


개    개