보이는 DOM에 요소가 있는지 어떻게 확인할 수 있습니까?

방법을 사용하지 않고 요소가 존재하는지 어떻게 테스트 getElementById합니까?

참조 용 라이브 데모 를 설정했습니다 . 또한 여기에 코드를 인쇄합니다.

<!DOCTYPE html>
<html>
<head>
    <script>
    var getRandomID = function (size) {
            var str = "",
                i = 0,
                chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
            while (i < size) {
                str += chars.substr(Math.floor(Math.random() * 62), 1);
                i++;
            }
            return str;
        },
        isNull = function (element) {
            var randomID = getRandomID(12),
                savedID = (element.id)? element.id : null;
            element.id = randomID;
            var foundElm = document.getElementById(randomID);
            element.removeAttribute('id');
            if (savedID !== null) {
                element.id = savedID;
            }
            return (foundElm) ? false : true;
        };
    window.onload = function () {
        var image = document.getElementById("demo");
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false
        console.log('null', (image === null) ? true : false); // false
        console.log('find-by-id', isNull(image)); // false
        image.parentNode.removeChild(image);
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
        console.log('null', (image === null) ? true : false); // false ~ should be true?
        console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
    };
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

기본적으로 위의 코드는 요소가 변수에 저장되고 DOM에서 제거되는 것을 보여줍니다. 요소가 DOM에서 제거되었지만 변수는 처음 선언되었을 때와 같이 요소를 유지합니다. 즉, 요소 ​​자체에 대한 실시간 참조가 아니라 복제본입니다. 결과적으로 변수의 값 (요소)이 존재하는지 점검하면 예기치 않은 결과가 제공됩니다.

이 isNull함수는 변수에서 요소 존재를 확인하려는 시도이며 작동하지만 동일한 결과를 얻는 더 쉬운 방법이 있는지 알고 싶습니다.

추신 : 주제와 관련된 좋은 기사를 알고 있다면 JavaScript 변수가 왜 이런 식으로 작동하는지 관심이 있습니다.

답변

일부 사람들이 여기에 착륙하는 것 같으며 요소 가 존재 하는지 알고 싶어 합니다 (원래 질문과 조금 다릅니다).

브라우저의 선택 방법 중 하나를 사용하여 진실한 값 (일반적으로)을 확인하는 것만 큼 ​​간단 합니다.

내 요소가 있었다 예를 들어, id의를 "find-me", 나는 간단하게 사용할 수 …

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

이것은 요소에 대한 참조를 반환하거나로 지정됩니다 null. 부울 값이 있어야하는 경우 !!메서드 호출 전에 a를 던지기 만하면 됩니다.

또한 (all living off document) 와 같은 요소를 찾기 위해 존재하는 다른 많은 방법 중 일부를 사용할 수 있습니다 .

  • querySelector()/querySelectorAll()
  • getElementsByClassName()
  • getElementsByName()

이러한 메소드 중 일부는을 반환 하므로 a 는 객체이므로 진실 이므로 속성 NodeList을 확인하십시오 .lengthNodeList

Csuwldcat은 요소가 가시적 인 DOM의 일부로 존재하는지 (원래 질문 한 것과 같이) 실제로 결정하기 위해 (이 답변에 포함 된 것처럼) 자신을 굴리는 것보다 더 나은 솔루션을 제공합니다 . 즉, DOM 요소 에서contains() 메소드 를 사용 합니다 .

당신은 그렇게 사용할 수 있습니다 …

document.body.contains(someReferenceToADomElement);

답변

getElementById()가능한 경우 사용하십시오 .

또한 jQuery를 사용하여 쉽게 수행 할 수있는 방법이 있습니다.

if ($('#elementId').length > 0) {
  // Exists.
}

타사 라이브러리를 사용할 수없는 경우 기본 JavaScript 만 사용하십시오.

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // Exists.
}

답변

Node.contains DOM API를 사용하면 페이지 (현재 DOM)에 어떤 요소가 있는지 쉽게 확인할 수 있습니다.

document.body.contains(YOUR_ELEMENT_HERE);

CROSS-BROWSER 참고 : documentInternet Explorer 의 개체에는 contains()브라우저 간 호환성을 보장 하는 방법 이 없습니다 document.body.contains(). 대신 브라우저를 사용하십시오 .

답변

나는 단순히 :

if(document.getElementById("myElementId")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}

그것은 나를 위해 일하고 아직 아무런 문제가 없었습니다 …

답변

parentNode 속성이 null인지 확인할 수 있습니다.

그건,

if(!myElement.parentNode)
{
    // The node is NOT in the DOM
}
else
{
    // The element is in the DOM
}

답변

에서 모질라 개발자 네트워크 :

이 함수는 요소가 페이지 본문에 있는지 확인합니다. contains ()가 포함되어 있고 본문에 자체가 포함되어 있는지 확인하는 것이 isInPage의 의도가 아니기 때문에이 경우 명시 적으로 false를 반환합니다.

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

node 는 <body>에서 확인하려는 노드 입니다.

답변

가장 쉬운 해결책은 baseURI 속성 을 확인하는 것 입니다.이 속성은 요소가 DOM에 삽입 될 때만 설정되며 제거 될 때 빈 문자열로 되돌아갑니다.

var div = document.querySelector('div');

// "div" is in the DOM, so should print a string
console.log(div.baseURI);

// Remove "div" from the DOM
document.body.removeChild(div);

// Should print an empty string
console.log(div.baseURI);
<div></div>

스 니펫 확장