Jak mogę sprawdzić, czy element istnieje w widoku DOM?

Użyj getElementById() jeśli jest dostępny.

Również, tutaj jest łatwy sposób, aby to zrobić z jQuery:

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

A jeśli nie możesz korzystać z bibliotek innych firm, po prostu trzymaj się JavaScript bazowego:

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

Za pomocą węzła .zawiera API DOM , można łatwo sprawdzić obecność dowolnego elementu na stronie (obecnie w DOM):

document.body.contains(YOUR_ELEMENT_HERE);

Notatka między przeglądarkami: obiekt document w Internet Explorerze nie ma metody contains() - aby zapewnić kompatybilność między przeglądarkami, użyj zamiast tego document.body.contains().

Po prostu robię:

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

To działa dla mnie i nie miał z tym jeszcze żadnych problemów...

Możesz po prostu sprawdzić, czy właściwość parentNode jest null.

Czyli

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

From Mozilla Developer Network :

Ta funkcja sprawdza, czy element znajduje się w ciele strony. Ponieważ contains() jest inkluzywne i określenie, czy ciało zawiera siebie, nie jest intencją isInPage, w tym przypadku jawnie zwraca false.

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

Node jest węzłem, który chcemy sprawdzić w .

Najprostszym rozwiązaniem jest sprawdzenie baseURI właściwość, która jest ustawiana tylko wtedy, gdy element zostanie wstawiony do DOM, a po jego usunięciu powróci do pustego łańcucha.

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>

Rozwiązanie JQuery:

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

To działało u mnie przy użyciu jQuery i nie wymagało $('#elementId')[0] do użycia.

Prosty sposób sprawdzenia czy element istnieje można wykonać za pomocą kodu jednoliniowego jQuery.

Oto poniższy kod:

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

Ten kod działa dla mnie i nie miałem z nim żadnych problemów.

    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");
    }

Wolę używać właściwości node.isConnected (Visit MDN ).

Uwaga: zwróci to wartość true, Jeśli element zostanie dołączony do katalogu cieni, co może nie być pożądanym zachowaniem wszystkich.

Przykład:

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

Rozwiązanie Csuwldcat wydaje się być najlepsze z całej gamy, ale potrzebna jest niewielka modyfikacja, aby działało poprawnie z elementem, który znajduje się w innym dokumencie niż uruchomiony kod JavaScript, na przykład iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Zwróć uwagę na użycie właściwości ownerDocument, w przeciwieństwie do zwykłej starej document (która może lub nie musi odnosić się do dokumentu właściciela elementu).

Torazaburo opublikował jeszcze prostszą metodę , która działa również z nielokalnymi elements, ale niestety używa właściwości baseURI, która nie jest w tej chwili jednolicie zaimplementowana we wszystkich przeglądarkach (mogłem ją uruchomić tylko w bazujących na Webkitach ). Nie mogłem znaleźć żadnych innych właściwości elementu lub węzła, które mogłyby być używane w podobny sposób, więc myślę, że na razie powyższe rozwiązanie jest tak dobre, jak to tylko możliwe.

Zamiast iteracji parents, możesz po prostu uzyskać obwiedniowy prostokąt, który jest zerami, gdy element jest odłączony od DOM:

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

Jeśli chcesz obsłużyć rozmiar krawędzi elementu o zerowej szerokości i wysokości w zero top i zero left, możesz sprawdzić dwukrotnie, iteracją parents aż do 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;
}

Inną opcją jest element.najbliższe :

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

Możesz również użyć jQuery.contains, która sprawdza czy element jest potomkiem innego elementu. Przekazałem document jako element nadrzędny do wyszukiwania, ponieważ wszystkie elementy, które istnieją na stronie DOM, są potomkiem document.

jQuery.contains( document, YOUR_ELEMENT)

Sprawdź czy element jest potomkiem <html> poprzez Node::contains():

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

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

Omówiłem to i więcej w is-dom-wolnostojący .

Proste rozwiązanie z 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;
}

Wszystkie istniejące elementy mają ustawiony parentElement, z wyjątkiem elementu HTML!

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

• Jeśli element jest w DOM, jego rodzice powinni być również w
• a ostatnim dziadkiem powinien być document

Więc aby sprawdzić czy po prostu zapętlamy się do drzewa elementu parentNode aż dotrzemy do ostatniego

Użyj tego:

/**
 * @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;
};

Ten warunek chick wszystkie przypadki.

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");

}

Podobało mi się to podejście:

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

if (elem)
    do this
else
    do that

Również

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

if (elem)
    do this
else
    do that

Użyj querySelectorAll z forEach,

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

Jako przeciwieństwo:

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

Spróbuj wykonać następujące czynności. Jest to najbardziej niezawodne Rozwiązanie:

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

Na przykład,

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'

Użyj poniższego polecenia, aby zwrócić, czy element istnieje w DOM:

return !!document.getElementById('myElement');

Zaznacz element exist or not

const elementExists = document.getElementById("find-me");
if(elementExists){
    console.log("have this element");
}else{
    console.log("this element doesn't exist");
}

Jak wylądowałem tutaj z powodu pytania. Niewiele z powyższych rozwiązań nie rozwiązuje problemu. Po kilku poszukiwaniach znalazłem rozwiązanie w internecie, które pod warunkiem, że węzeł jest obecny w bieżącym viewporcie, gdzie odpowiedzi próbowałem rozwiązuje to jest obecny w ciele, czy nie.

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

isInViewport(document.querySelector('.selector-i-am-looking-for'));

Fragment jest pobrany z tutaj , aby zachować jako kopię zapasową, ponieważ linki mogą być niedostępne po pewnym czasie. Sprawdź link, aby uzyskać wyjaśnienie.

I nie zamierzał pisać w komentarz, jak w większości przypadków, są ignorowane.