getElement, querySelector로 요소 검색하기

• DOM 에서 원하는 노드 검색하게 해 주는 주요 메서드 존재

• querySelector 는 검색 기준은 CSS 선택자이며 호출 대상은 요소가 될 수 있으며 컬렉션은 갱신되지 않으며 CSS 선택자에 대응하는 요소 중 첫번째 요소 반환

• querySelectorAll 는 검색 기준은 CSS 선택자이며 호출 대상은 요소가 될 수 있으며 컬렉션은 갱신되지 않으며 CSS 선택자에 대응하는 요소 모두 컬렉션으로 반환 (가상 클래스도 사용 가능)

• querySelector 는 첫 번째 요소 반환하고 바로 검색 멈추기에 querySelectorAll 보다 빠름

• getElementById 는 검색 기준은 id 이며 호출 대상은 요소가 되지 못 하며 컬렉션은 갱신되지 않음

• id 속성 값 그대로 딴 전역 변수를 이용해 접근할 수 있지만 하위 호환을 위해 남겨둔 것이며 이름 충돌할 가능성 있기 때문에 지양하며 getElementById 지향

• id 중복되면 메서드 동작 예측 불가능해지기 때문에 금지

• getElementByName 는 검색 기준은 name 이며 호출 대상은 요소가 되지 못 하며 컬렉션은 갱신되며 대응하는 요소 모두 컬렉션으로 반환

• getElementByTagName 는 검색 기준은 태그나 ‘*’ 이며 호출 대상은 요소가 될 수 있으며 컬렉션은 갱신되며 대응하는 요소 모두 컬렉션으로 반환

• getElementByClassName 는 검색 기준은 class 이며 호출 대상은 요소가 될 수 있으며 컬렉션은 갱신되며 대응하는 요소 모두 컬렉션으로 반환

• 실무에선 querySelector 나 querySelectorAll 을 가장 많이 사용

• elem.matches(css) 는 elem이 해당 CSS 선택자와 일치하는지 여부 검사

• elem.closest(css) 는 해당 CSS 선택자와 일치하는 가장 가까운 조상 요소 탐색. (elem자신도 포함)

• elemA.contains(elemB)는 elemB가 elemA에 속하거나(후손이거나) 일치 할 시 true/false 반환