Visible DOM에 요소가 있는지 확인하는 방법

ID를 사용하여 DOM에서 요소를 찾는 것은 JavaScript에서 일반적인 작업입니다. 하지만 이 방법을 사용하지 않고 요소의 존재를 확인해야 하는 경우에는 어떻게 해야 합니까?

보이지 않는 요소 식별

요소가 DOM에서 제거될 때 JavaScript 변수의 해당 참조는 여전히 유지됩니다. 존재합니다. 이로 인해 typeof 또는 === null을 사용하여 요소 존재를 확인할 때 예기치 않은 결과가 발생할 수 있습니다.

현재 접근 방식

isNull() 함수는 임시로 임의의 ID를 설정하여 이 문제를 회피하려고 시도합니다. getElementById()를 사용하여 요소를 찾은 다음 임시 ID를 제거합니다. 이 접근 방식은 해당 요소가 DOM에서 발견되지 않으면 true를 반환하고, 발견되면 false를 반환합니다.

존재 확인을 위한 단순화

목표가 단순히 요소가 존재하는지 확인하는 것이라면( 가시성), 더 간단한 접근 방식은 브라우저의 요소 선택 방법 중 하나를 사용하는 것입니다:

var elementExists = document.getElementById("find-me");

부울의 경우 값을 사용할 수 있습니다 !! 선택 방법 호출 전에. 또한 querySelector() 및 getElementsByTagName()과 같은 메소드를 사용할 수 있습니다.

DOM에서 가시성 확인

표시되는 DOM에 요소가 존재하는지 구체적으로 확인하려면 Contains() 메소드를 사용할 수 있습니다. 사용됩니다:

document.body.contains(someReferenceToADomElement);

이 메서드는 요소가 DOM에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.