보이는 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>

jQuery 솔루션 :

if ($('#elementId').length) {
    // element exists, do something...
}

이것은 jQuery를 사용하여 저에게 효과적이며 사용하지 않아도 $('#elementId')[0]됩니다.

csuwldcat의 솔루션 은 가장 좋은 것으로 보이지만 iframe과 같이 JavaScript 코드와 다른 문서에있는 요소에서 올바르게 작동하려면 약간 수정해야합니다.

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

ownerDocument일반 document요소 (요소의 소유자 문서를 참조하거나 참조하지 않을 수 있음) 와 달리 요소의 속성 사용에 유의 하십시오.

torazaburo는 로컬이 아닌 요소에서도 작동 하는 더 간단한 방법 을 게시 했지만 불행히도 baseURI현재 브라우저에서 균일하게 구현되지 않은 속성을 사용합니다 ( WebKit 기반 에서만 작동 할 수 있음 ). 비슷한 방식으로 사용할 수있는 다른 요소 또는 노드 속성을 찾을 수 없으므로 위의 해결책 인 한해가 좋은 것 같습니다.

부모를 반복하는 대신 요소가 DOM에서 분리 될 때 경계 사각형을 얻을 수 있습니다.

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    return (rect.top || rect.left || rect.height || rect.width)?true:false;
}

너비가 0 인 요소와 너비가 0 인 요소의 가장자리를 0과 왼쪽으로 처리하려는 경우 부모와 부모가 document.body .

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    if (element.top || element.left || element.height || element.width)
        return true;
    while(element) {
        if (element == document.body)
            return true;
        element = element.parentNode;
    }
    return false;
}

jQuery의 한 줄 코드를 통해 요소가 존재하는지 확인하는 간단한 방법을 수행 할 수 있습니다.

아래 코드는 다음과 같습니다.

if ($('#elementId').length > 0) {
    // Do stuff here if the element exists
} else {
    // Do stuff here if the element does not exist
}

다른 옵션은 element.closest입니다 .

element.closest('body') === null

이 코드는 저에게 효과적이며 아무런 문제가 없었습니다.

    if(document.getElementById("mySPAN")) {
        // If the element exists, execute this code
        alert("Element exists");
    }
    else {
        // If the element does not exist execute this code
        alert("Element does not exists");
    }

jQuery.contains요소가 다른 요소의 자손인지 확인하는을 사용할 수도 있습니다 . documentDOM 페이지에 존재하는 요소가의 자손이므로 검색하기 위해 부모 요소로 전달되었습니다 document.

jQuery.contains( document, YOUR_ELEMENT)

요소가 <html>via 의 자식인지 확인하십시오 Node::contains().

const div = document.createElement('div');
document.documentElement.contains(div); //-> false

document.body.appendChild(div);
document.documentElement.contains(div); //-> true

나는이 덮여 및 더 많은 것 입니다-DOM의 주택 .

jQuery를 사용한 간단한 솔루션 :

$('body').find(yourElement)[0] != null

// This will work prefectly in all :D
function basedInDocument(el) {

    // This function is used for checking if this element in the real DOM
    while (el.parentElement != null) {
        if (el.parentElement == document.body) {
            return true;
        }
        el = el.parentElement; // For checking the parent of.
    } // If the loop breaks, it will return false, meaning
      // the element is not in the real DOM.

    return false;
}

• 요소가에 있으면 DOM해당 부모도
• 그리고 마지막 조부모는 document

parentNode마지막 조부모에 도달 할 때까지 요소의 트리에 루프를 반복하는지 확인

이것을 사용하십시오 :

/**
 * @param {HTMLElement} element - The element to check
 * @param {boolean}     inBody  - Checks if the element is in the body
 * @return {boolean}
 */
var isInDOM = function(element, inBody) {
    var _ = element, last;

    while (_) {
        last = _;
        if (inBody && last === document.body) { break;}
        _ = _.parentNode;
    }

    return inBody ? last === document.body : last === document;
};

나는이 접근법을 좋아했다.

var elem = document.getElementById('elementID');

if (elem)
    do this
else
    do that

또한

var elem = ((document.getElementById('elemID')) ? true:false);

if (elem)
    do this
else
    do that

querySelectorAll와 함께 사용 forEach,

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

반대로 :

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}

다음을 시도하십시오. 가장 안정적인 솔루션입니다.

window.getComputedStyle(x).display == ""

예를 들어

var x = document.createElement("html")
var y = document.createElement("body")
var z = document.createElement("div")
x.appendChild(y);
y.appendChild(z);

z.style.display = "block";

console.log(z.closest("html") == null); // 'false'
console.log(z.style.display); // 'block'
console.log(window.getComputedStyle(z).display == ""); // 'true'

HTML 요소를 제외한 모든 기존 요소에는 parentElement가 설정되어 있습니다!

function elExists (e) { 
    return (e.nodeName === 'HTML' || e.parentElement !== null);
};

이 상태는 모든 경우에 영향을 미칩니다.

function del() {
//chick if dom has this element 
//if not true condition means null or undifind or false .

if (!document.querySelector("#ul_list ")===true){

// msg to user
    alert("click btn load ");

// if console chick for you and show null clear console.
    console.clear();

// the function will stop.
    return false;
}

// if its true function will log delet .
console.log("delet");

}

이 node.isConnected속성을 선호 합니다 ( MDN 방문) )을 .

참고 : 요소가 ShadowRoot에 추가 된 경우 true를 반환합니다. 이는 모든 사람이 원하는 행동이 아닐 수도 있습니다.

예:

const element = document.createElement('div');
console.log(element.isConnected); // Returns false
document.body.append(element);
console.log(element.isConnected); // Returns true