[JS] 셀렉터를 사용하여 DOM요소를 선택할 수 있는 방법들

포스팅 한 이유

셀렉터로 요소를 선택할 일이 있었는데
탐색대상인 본인을 포함하여 하위로 탐색하고 싶었다.

가장 많이 쓰이는 메소드들을 살펴보았는데,
querySelector/querySelectorAll 의 경우 본인을 제외하고 하위로 탐색하고,
closest 는 본인을 포함하여 상위로 탐색한다.

둘 다 맘에 안들었다.

그래서 결국은 matches를 추가적으로 활용하여 선택할 수 있는 방법을 찾아냈다.

(그 과정에서 셀렉터를 사용하여 DOM요소를 선택할 수 있는 방법들을 죄다거의 구글링해봤기 때문에. 포스팅했다는 뜻)

 

셀렉터를 사용하여 DOM요소를 선택할 수 있는 방법들

1. element.querySelector(selector) & element.querySelectorAll(selector) -> 자식요소중에서 탐색
2. element.closest(selector) -> 본인으로부터 시작하여 (본인포함) 상위요소로 탐색
3. 직접 반환하는 메소드는 아니지만, element.matches(selector)를 이용하여 탐색

 

1. querySelector & querySelectorAll

가장 기본적으로 querySelector, querySelectorAll 이 있다.

element = baseElement.querySelector(selectors);
elementList = baseElement.querySelectorAll(selectors);

셀렉터 혹은 셀렉터 뭉치를 입력하면, 각각 조건을 만족하는 요소, 요소배열을 반환한다.

baseElement(본인)을 제외하고 하위요소들을 탐색한다.

 

2. closest

targetElement.closest(selectors);

자신으로부터 출발하여 부모요소로 향한다.

지정한 선택자에 만족할 때까지 탐색한다.

 

3. element.matches(selector) 를 활용한 방법

일단 matches 자체는 Boolean 값을 반환하는 메소드인데

var result = element.matches(selectorString);

선택자를 만족하는 엘리먼트면 true, 그렇지 않으면 false 를 반환한다.

 

---

처음에 궁금했던
탐색대상인 본인을 포함하여 하위로 탐색하는 방법을 matches를 활용하여 구현해보았다.

 

    <div class="box carrot">
      <div class="one"></div>
      <div class="two carrot"></div>
      <div class="three carrot"></div>
    </div>

위와 같은 HTML 마크업 요소들이 있을 때,
탐색대상을 box 로 하고, 본인을 포함하여 carrot 이라는 클래스이름을 가진 요소를 탐색하고 싶다면?

 

querySelector 처럼 처음으로 찾은 요소 하나만을 반환하려면 요렇게 쓸 수 있다.

element.matches(selector) && element || element.querySelector(selector);

 

실제로 적용한다면 아래와 같다.

 

다음으로 querySelectorAll처럼 처음으로 조건을 만족하는 모든 요소를 반환하려면 요렇게 쓸 수 있다.

[element, ...element.querySelectorAll(selector)].filter(elem => elem.matches(selector));

본인을 첫번째로 넣고, 그 뒤에 하위요소들을 querySelectorAll 로 선택한 뒤 펼치기연산자(...)로 추가했다.
그리고 그 배열 안에서 ".carrot" 을 만족하는 녀석을 필터링한다.

 

반환값은 다음과 같다.

querySelectorAll을 마치 본인을 포함하여 탐색한 것 마냥 쓸 수 있다.

 

 

 

참고 :
https://developer.mozilla.org/ko/docs/Web/API/Element/querySelector
https://developer.mozilla.org/ko/docs/Web/API/Element/closest
https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
https://stackoverflow.com/questions/60831411/how-to-have-element-queryselector-include-the-root-element/60831454#60831454