Back-end/JavaScript

[jquery] DOM selector 접근

cheersHena 2020. 3. 18. 15:56
반응형

기본 selector

  • *  : 모든요소 
  • element : 지정된 요소 이름을 가진 모든 요소 
  • #id: 지정된 id 특성값을 가진 모든 요소들 
  • .class: 지정된 class특성값을 가진 모든 요소들
  • selector1, selector2 : 하나이상의 셀렉터와 일치하는 모든 요소들 (셀렉터 조합시 .add() 메서드를 사용하면 효율적) 

계층 탐색 selector

  • 조상과 후손 요소 : ancestor(공백)descendant : 다른요소 하위요소들 탐색 selector ex) li a 
  • 부모와 자식 요소 : parent > child :  다른 요소의 직접적인 자식 요소들 탐색 selector (특정부모 요소의 모든 자식요소 탐색하려면 자식요소자리에 * 사용) 
  • 이웃 요소 : previous + next : 이전 요소의 바로 다으멩 따라오는 근접한 이웃 요소 탐색 selector
  • 모든 이웃요소: previous ~ silbings :이전요소의 모든 이웃요소들 탐색 selector

선택자 

사용 예시  

설명  

 자식 Child

  $("#a > h1")

 직계 자식 요소 선택

#a 요소의 직계자식 중 h1을 선택.

 후손 Descendant

  $("#a   h1")

 후손 요소 선택

#a 요소의 내부에 포함된 후손요소 중 h1 선택.

 다음 인접

  $("#a + h1")

#a 요소의 동등계층 구조에서 다음요소가 

h1인것을 선택 

 다음 형제 

  $("#a ~ h1")

 #a 요소의 동등계층 구조에서 #a 다음에 나오는 

형제요소 h1 선택 




활용예제)
id 요소내의 input 요소의 값:

$("#id input:option[name='~~']").val();
ex) $("#m_" + ukey + " input:checkbox[name=ukey]").prop("checked", true)
//  id: m_abcd1234 인 요소내의 체크박스(name:"ukey"인)를 활성화하라.
** input앞에 공백 주의  (공백 :'이하'를 의미) 

예제의 경우 id 내에 있는 input 요소이므로 id가 상위, input요소가 하위. 
--> #id (공백) input:option[~~~]








반응형