JS에서 DOM을 가져올때 앨리먼트가 존재하는지 확인하기

티스토리 뷰

스터디/Vanilla JS

밀크티냠냠 2022. 1. 18. 14:06

여태껏은 내가 만든 DOM구조에서 내가 원하는 앨리먼트를 가져왔기때문에 부모를 가져오면 자식은 당연히 있었는데.. 내가 만든게아니라 워드프레스 플러그인으로인해 만들어진 구조는 업데이트 이후 바뀔 수 도 있으니까 자식까지 존재 여부를 확인해야하는지가 고민이 되었다!

1. 어느 선까지 검사하나? 이건 아직 모르겠다.. 항상 검사할것같다.

2. 검사시 앨리먼트가 존재하지않을때 나오는 결과 모음

querySelector 존재하지 않을떄 결과 : null

Document.querySelector() - Web API | MDN

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

developer.mozilla.org

querySelectorAll 존재하지 않을때 결과 : 비어있는 NodeList

.'.length = 0이므로 길이로 비어있다는걸 확인 가능하다.

Document.querySelectorAll() - Web API | MDN

Document 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다.

developer.mozilla.org

isset으로 검색하기

[javascript] JavaScript isset () 해당 - 리뷰나라

PHP에서는 할 수 있습니다 if(isset($array['foo'])) { ... }. JavaScript에서는 종종 if(array.foo) { ... }같은 작업을 수행하지만, 정확히 같은 문장은 아닙니다. 조건은 다음과 같은 경우에도 거짓으로 평가됩니

daplus.net

CSV파일을 JS에서 가져오는 방법! (0)	2022.03.09
React.js와 Node.js 공부 뭐부터하지 (0)	2022.03.03
javascript 프레임워크와 라이브러리 차이 (0)	2022.01.05
masonry layout 만들면서... 디바운스 & 스로틀, 라이브러리 참고 (0)	2021.06.14
js 이벤트 제어하기: resize를 사용한다면 기억하자. (0)	2021.06.13

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함