javascript 특정 요소가 있는지 확인하기

자바스크립트를 사용하여 특정 요소가 DOM에 있는지 확인하는 방법입니다.
querySelector는 특정 요소를 찾을 수 없을 때 null값을 리턴 합니다.

var noElem = document.querySelector('.elem');
console.log(elem); // Logs "null"

// 해당하는 요소가 페이지에 있으면
if (document.querySelector('.elem') !== null) {
  console.log('The element exists');
} else {
  console.log('The element does not exists');
}

querySelectorAll은 일치하는 모든 요소의 NodeList를 반환합니다.

NodeList는 배엵 객체이므로, 반환된 요소 수를 확인하기 위해 length속성을 사용해 확인할 수 있습니다.

var noElems = document.querySelectorAll('.elem');
console.log(noElems); // Logs []

if (document.querySelectorAll('.elem').length) {
  console.log('The element exists');
} else {
  console.log('The element does not exists');
}

또한, Node.contains을 사용하면 페이지 본문에 요소가 있는지 확인할 수 있습니다.

function isInPage(elem) {
  return (elem === document.body) ? false : document.body.contains(elem);
}