1. nodeName vs matches
event.target을 했을때 해당 요소가 어떤 태그인지 알려면 nodeName을 확인하면 됨. 그러나 기본적으로 nodeName은
이렇게 대문자로 나오기때문에 event.target.nodeName.toLowerCase() == 'summary' 이렇게 비교를 해줘야함(아님 걍 대문자로 비교해도 됨). 근데 어느순간 저렇게 하는게 혹시 구린방법(?)이 아닐까라는 생각에 찾아봄.
event.target.toString() or event.target.nodeName to check type of element
I am building an eventlistener with delegation (like jQuery $("body").on("click", "button")). For that i have following event listener: document.body.addEventListener("click", function(e) {}) Now i
stackoverflow.com
여기서 본건데 결론은 저렇게 nodeName을 대놓고 비교하는게 속도적인 측면에서는 제일 빠른 방법임.
위 스택오버플로우에서 질문자가 성능을 비교해놓은 사이트가 있었는데 nodeName == 'SUMMARY'랑 event.target.matches('summary') 등 문법 속도를 비교해보았는데
JSBEN.CH Performance Benchmarking Playground for JavaScript
jsben.ch
거진 1.7배는 차이가 나더라. 그러면 matches는 주로 어따쓰이나 좀 찾아봤더니 보통 css 선택자를 기반으로 요소를 테스트하는거라고 함.
2. matches vs contains
라고 썼는데 css 선택자를 기반으로 한다는게 무슨말인지 잘 몰랐는데 알고보니 이렇게 찾을 수 있다는 것임.
- 'class 중에 title이라는걸 가지고 있니?' 라는 단순한거는 contains
- 'class 중에 title을 가지고있는데 그와중에 data-value가 3이고 focus까지 되어있니?'를 찾고싶을때는 matches
event.target.contains('.title');
event.target.matches('.title[data-value="3"]:focus);이렇게 좀 더 다양하게 찾는게 matches라고 보면 되는듯함. 얘네 둘다 속도 차이는 없다고 함.
What is the difference between element.classList.contains() and element.matches()
In JavaScript you can check whether an element has a specific class by using the following options: Option 1 element.classList.contains('someClass'); Option 2 This option also allows to check for
stackoverflow.com
'Javascript' 카테고리의 다른 글
| 공백/텍스트없는 태그 유니코드로 잡아내기 (0) | 2022.08.24 |
|---|---|
| javascript 몇몇 문법 속도 벤치마크 정리 (0) | 2022.06.28 |
| 공통 html을 다른 html파일에서 쓰기, html에 include하는 방법 (0) | 2022.06.22 |
| if else vs if if 차이 (0) | 2022.06.10 |
| 나만 헷갈림? style.left, offsetWidth, clientWidth, scrollWidth 총정리 (0) | 2022.06.03 |