November 26, 2021
요소들이 가까이 붙어있다면 앞서 학습한 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있습니다. 그런데, 요소들이 가까이 붙어있지 않은 경우도 있기 마련입니다. 상대 위치를 이용하지 않으면서 웹 페이지 내에서 원하는 요소 노드에 접근하는 방법은 없는 걸까요?
이번 챕터에선 이를 가능하게 해주는 메서드에 대해 알아보겠습니다.
elem.querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환합니다.
elem.querySelectorAll(css)[0]과 동일하죠. elem.querySelectorAll(css)[0]은 선택자에 해당하는 모든 요소를 검색해 첫 번째 요소만을 반환하고, elem.querySelector는 해당하는 요소를 찾으면 검색을 멈춘다는 점에서 차이가 있습니다. elem.querySelector가 더 빠른 이유이죠. querySelector는 querySelectorAll에 비해 코드의 길이가 짧다는 장점도 있습니다.
태그나 클래스 등을 이용해 원하는 노드를 찾아주는 메서드도 있습니다.
querySelector를 이용하는 게 더 편리하고 문법도 짧아서, 요즘은 이런 메서드들을 잘 쓰진 않습니다.
DOM에서 원하는 노드를 검색하게 해주는 주요 메서드 6가지는 다음과 같습니다.
| 메서드 | 검색 기준 | 호출 대상이 요소가 될 수 있는지에 대한 여부 | 컬렉션 갱신 여부 |
|---|---|---|---|
querySelector |
CSS 선택자 | ✔ | - |
querySelectorAll |
CSS 선택자 | ✔ | - |
getElementById |
id |
- | - |
getElementsByName |
name |
- | ✔ |
getElementsByTagName |
태그나 '*' |
✔ | ✔ |
getElementsByClassName |
class | ✔ | ✔ |
아마 실무에선 querySelector나 querySelectorAll을 가장 많이 사용하실 겁니다. getElementBy로 시작하는 메서드는 대개 오래된 스크립트에서 만날 수 있는데, 일부 이 메서드가 꼭 필요한 상황에서 쓰이는 경우도 있습니다.
이 외에 알아두면 좋을 만한 메서드는 아래와 같습니다.
elem.matches(css)는 elem이 해당 CSS 선택자와 일치하는지 여부를 검사합니다.elem.closest(css)는 해당 CSS 선택자와 일치하는 가장 가까운 조상 요소를 탐색합니다. 이때, elem 자기 자신도 검색 대상에 포함됩니다.위에선 언급하지 않았지만, 노드의 부모-자식 관계를 확인할 수 있도록 도와주는 유용한 메서드 하나를 더 소개해 드리고 마무리하겠습니다.
elemA.contains(elemB)는 elemB가 elemA에 속하거나(elemB가 elemA의 후손인 경우) elemA==elemB일 때, 참을 반환합니다.