JS querySelector Null 값 문의 합니다

Question

JavaScript 파일을 외부에서 링크를 하였습니다 document.addEventListener(&#34;DOMContentLoaded&#34;, () &#61;> { document.querySelector(&#34;form div.btn_box&#34;).addEventListener(&#34;click&#34;, (e) &#61;> { let className &#61; e.target.className; alert(className); }); });HTML DOM에 form > div class&#61;btn_box 가 설정된 부분이 있으면 문제가 없는데해당 DOM selector가 없는 곳에서는 querySelector가 null 값이 되어 addEventListener에서 오류가 납니다이후 다른 코드가 실행되는 것을 방해하기도 하고, Console에 오류가 나타납니다. 해당 DOM Selector가 있는 곳에만 적용을 하면 문제가 없겠지만공통 JS 파일에 해당 코드가 있습니다 해결 방법이 있을까요?

클라이번 · Accepted Answer

var objSelector &#61; document.querySelector(&#34;form div.btn_box&#34;); if(objSelector !&#61; null) { objSelector.addEventListener(&#34;click&#34;, (e) &#61;> { let className &#61; e.target.className; alert(className); }); }이런식으로 풀면 되지 않을까 싶은데요, 혹시 이게 불가능한 상황이신걸까요?

siva6 · Answer

querySelector의 결과 값에서 null인지 확인하고 event를 걸면 되는 것 아닌가요?

undefined_and_null · Answer

위에 분과 동일한 처리 방법이긴 한데요 참고로 vscode &#43; typescript (strict null check 켜고) 쓰시면 null 처리 다 에디터가 가르쳐줘요~ document.querySelector(&#34;form div.btn_box&#34;).addEventListener // 에디터에서 빨간 줄: &#34;여기 null 가능성 있습니다&#34; document.querySelector(&#34;form div.btn_box&#34;)?.addEventListener // 자동완성 쓰시면 null-coalescing(?.) 알아서 달아줍니다. // 대충 &#34;null/undefined 면 뒤에 addEventListener 코드 돌리지 않기&#34;라 보시면 됩니다 이렇게 쓰시면 아래와 같은 동작합니다~ const elem &#61; document.querySelector(&#34;form div.btn_box&#34;) if (elem !&#61;&#61; null && elem !&#61;&#61; undefined) { elem.addEventListener(...) } 수정: 아래 댓글분 말씀대로 연산자 이름이 'optional chaining' 이네요ㅎㅎ &#x1f613;

컴포지트 · Answer

만약 바벨 등이 Optional 구문을 지원한다면 선택 체이닝 연산자를 사용하시길.예)document.addEventListener(&#34;DOMContentLoaded&#34;, () &#61;> { document.querySelector(&#34;form div.btn_box&#34;)?.addEventListener(&#34;click&#34;, (e) &#61;> { let className &#61; e.target.className; alert(className); }); });querySelector 뒤에 잘 보면 ?. 구문이 보일 겁니다. 만약 null 같은 없는 값에다 걸면 뒤에 함수 및 속성은 실행되지 않고 오류도 발생하지 않습니다. (만약 할당받을 경우 최초 null 및 undefined 등의 불능 값이 나온 함수 및 속성 결과값이 나옵니다.)Optional chaining - JavaScript | MDN (mozilla.org)

내멋으로 · Answer

아!! 사전에 null check를 해야 하는 군요..ㅠ

JS querySelector Null 값 문의 합니다

5개의 답변

#dom 목록