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