https://peamexx.tistory.com/230
효율적인 이벤트리스너 거는법과 tagName과 nodeName 차이
1 2 3 li에 클릭했을 때 행동을 제어하고 싶다면, document.querySelectorAll로 li 배열을 가져와서 foreach같은 걸로 순환하며 addEventListener를 등록할텐데 이렇게 하면 li 개수만큼 이벤트리스너가 등록되기
peamexx.tistory.com
이 글에 이어서 이름 비교만큼 많이 쓰는게 클래스 가지고 있냐 아니냐 인데 이때도 두가지 방법이 있음.
1. contains
document.querySelector("button").classList.contains("btn");이 말은 button element가 btn이라는 클래스를 가지고 있냐라는 의미로 제이쿼리로 한다면 hasClass같은 것임. 딱 하나만 검사할 수 있기때문에 해당 요소가 ??라는 클래스를 가지고 있냐를 판단할 경우 편함.
2. matches
document.querySelector("button").matches(".btn.active");일단 contains보다 길이가 짧다..! 그리고 조건을 여러개 판단할 수 있음. btn이라는 클래스를 가지고 있으면서 active도 가지고 있냐라는 의미로 좀 더 유연함.
document.querySelector("button").matches(".btn[data-value='2']:hover");이런 것도 가능함. 단순히 클래스뿐이 아니라 data값, 상태 등도 판단 가능함.
결론 둘다 상관없음. 성능도 별 차이 없음.
추가로 성능 하니까 여기 조흔 벤치마크 사이트를 찾음!
https://www.measurethat.net/Benchmarks/Show/7742/0/matches-vs-closest-vs-classlist
Benchmark: matches vs. closest vs. classList - MeasureThat.net
www.measurethat.net
'Javascript' 카테고리의 다른 글
| input에서 enter쳤는데 두번 실행될 때 (0) | 2024.02.22 |
|---|---|
| [vscode] 간편한 snippet 등록하기 (0) | 2024.02.01 |
| 효율적인 이벤트리스너 거는법과 tagName과 nodeName 차이 (0) | 2023.11.23 |
| input창 글자수 넘으면 자동으로 삭제하기, 숫자만 쓰기 (1) | 2023.10.26 |
| append 관련 오류. The new child element contains the parent. (0) | 2023.10.24 |