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 // h2 ~ 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 되어있는 요소 찾기