요소 탐색

javascript

	document.getEelmentsByTagName(태그이름)
	document.getEelmentById(아이디);
	document.getEelmentsByClassName(클래스이름); //	HTMLCollection 반환
	document.getElementsByName(name속성값);         
	document.querySelector(CSS 선택자);         //	선택자에 해당하는 첫번째요소만 선택
	document.querySelectorAll(CSS 선택자)       //	선택자에 해당하는 모든요소, 반환객체(nodeList)

* HTMLCollection
	- 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments 처럼 배열과 유사한 객체)
	- 리스트에서 선택할 때 필요한 메서드와 속성을 제공    


* 속성
	- HTMLCollection.length
		: 컬렉션 항목의 갯수를 반환


* 메서드
	- HTMLCollection.item(index)
		: 리스트에서 주어진 인덱스의 노드를 반환, 인덱스가 범위 밖일 경우 null을 반환
		: HTMLCollection[index] 같은 기능
	- HTMLCollection.namedItem(name or id)
		:  리스트에서 ID 또는 이름 속성이 주어진 문자열과 일치하는 노드를 반환, 
    		이름 속성판별은 HTML에서만 최후의 수단으로 쓰이며 참조하는 요소가 name 속성을 지원해야 함, 
		: 일치하는 요소가 없으면 null을 반환
		: HTMLCollection.name(or id) 같은 기능

jQuery

		$('*'); 			//모든 엘리먼트 선택
		$('div'); 			// Tag 이름으로 노드 찾기
		$('#idName') 		// id 이름으로 노드 찾기
		$('.className'); 	// class 이름으로 노드 찾기
		$('ul.className');	// ul엘리먼트 중 class 이름이 className인 엘리먼트 선택
		$('ul, div'); 		// ul 및 div 태그 선택
		$('div img'); 		// div의 자손노드 중 Tag 이름이 img인 모든 엘리먼트 선택
		$('ul .className'); // ul의 자손노드 중 class 이름이 className 인 엘리먼트 선택
		$('ul>li'); 		// ul Tag의 바로 아래 자식노드 중 li Tag인 엘리먼트 선택


	 * 필터
		:not(selector)		// 셀렉터와 일치하지 않는 요소들 리턴
		:first				// 선택된 요소 중 첫 번째 요소
		:last				// 선택된 요소 중 마지막 요소
		:even				// 선택된 요소 중 짝수 인덱스 요소들
		:odd				// 선택된 요소 중 홀수 인덱스 요소들
		:eq(index)			// 선택된 요소 중 지정된 index 번호를 가진 요소
		:gt(index)			// 선택된 요소 중 지정된 index 번호보다 큰 인덱스 요소들
		:lt(index)			// 선택된 요소 중 지정된 index 번호보다 작은 인덱스 요소들 
		:header				// h1 ~ h6 요소들
		:animated			// 애니메이션이 적용된 모든 요소들
		:focus				// 현재 포커스를 가지고 있는 요소
		:contains("text")	// "text"를 가지고 있는 요소들
		:empty				// 자식 요소가 없는 모든 요소들
		:parent				// 자식 요소를 가지고 있는 모든 요소들
		:has(selector)		// selector에 부합하는 요소를 하나 이상 가지고 있는 요소들
		:hidden				// 화면에서 숨겨진 모든 요소들
		:visible			// 공간을 차지하고 있는 모든 요소들
		:nth-child(expr)	// expr 순번의 자식 요소
		:first-child		// 첫번째 자식 요소
		:last-child			// 마지막 자식 요소
		:only-child			// 요소의 자식 요소가 하나뿐인 요소

		//예시
		$('div:not("#summary")');	// #summary를 제외한 나머지 div 태그들을 선택
		$("li").eq(3);				// 찾은 노드 중 4 번째 노드에 접근하기
		$("div:has(p)");			// <p> 요소를 가진 모든 <div> 요소들
		$("ul li:nth-child(2)");	// 두 번째 <li> 요소


	* 속성옵션 필터
		$("[attr]");				// attr 속성을 가진 모든 요소들
		$("el[attr]");				// 속성 attr 를 포함한 모든 el 노드 찾기
		$("el[attr=val]");			// 속성 attr 의 값이 val 인 모든 el 노드 찾기
		$("el[attr!=val]");			// 속성 attr 의 값이 val이 아닌 모든 el 노드 찾기
		$("el[attr^=val]");			// 속성 attr 의 값이 val 로 시작하는 모든 el 노드 찾기
		$("el[attr$=val]");			// 속성 attr 의 값이 val 로 끝나는 모든 el 노드 찾기
		$("el[attr*=val]");			// 속성 attr 의 값이 val 을 포함하고 있는 모든 el 노드 찾기
		$("[attribute|='value']");	// 속성값이 value값과 일치하거나 value- 으로 시작하는 요소들
		$("[attr1][attr2]");		// 지정된 속성중 하나를 가진 모든 요소들

		// 예시
		$("div[class*=test]");		// class의 값이 test를 포함하고 있는 모든 div 노드
 
  	* 폼 요소
		폼 요소의 값 조회하기
		<input>,<textarea>,<select> 요소의 값을 알아낸다.
		.val()
		 폼 필터
		:input, :text, :password, :radio, :checkbox, :submit,
		:image, :reset, :button, :file, :selected
		:enabled, :disabled, :checked
        
		//예시
		$('input[name="checkbox"]:checked'); 
		// name 속성의 값이 checkbox인 input 태그 중 checked 되어있는 요소 찾기