JS/JS 공부

[JS] QuerySelector, QuerySelectorAll (getElementId)

congs 2023. 4. 24. 09:51

querySelector() , querySelectorAll()

: HTML 노드 (관리객체)로 리턴하는 메서드

 

 

getElement**()   :   HTML Collection으로 리턴

  • name, id 속성으로 접근 가능
  • 속성 접근시 더 유용, 더 빠르고 많은 지원 받기 가능
element = document.getElementById(id);

id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다.

 

 

querySelector() ,  querySelectorAll()  :   NodeList 형태로 리턴

  • 배열, classList 등 여러개의 값 가져오기 사용시 많이 사용
  • index번호처럼 [0] 번지로 접근 가능
  • 더 구체적인 엘리먼트를 선택하고 싶은 경우

 

1. querySelector()

element = document.querySelector(selectors);

selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null반환한다.

- 단일 노드 리턴

 

 

2. querySelectorAll()

element = document.querySelectorAll(selectors);

여러 엘리먼트를 같이 반환

- 노드 리스트 형태로 리턴