it-swarm.com.de

Wie überprüfe ich, ob ein Element im sichtbaren DOM vorhanden ist?

Wie testet man ein Element auf Existenz ohne die Verwendung der getElementById -Methode? Ich habe eine Live-Demo als Referenz eingerichtet. Ich werde den Code auch hier ausdrucken:

<!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>

Grundsätzlich zeigt der obige Code, dass ein Element in einer Variablen gespeichert und dann aus dom entfernt wird. Obwohl das Element aus dem dom entfernt wurde, behält die Variable das Element so bei, wie es bei der ersten Deklaration war. Mit anderen Worten, es handelt sich nicht um eine Live-Referenz auf das Element selbst, sondern um eine Replik. Wenn Sie den Wert der Variablen (das Element) auf Existenz prüfen, wird dies zu einem unerwarteten Ergebnis führen.

Die Funktion isNull ist mein Versuch, die Existenz von Elementen in einer Variablen zu überprüfen, und sie funktioniert. Ich möchte jedoch wissen, ob es einen einfacheren Weg gibt, das gleiche Ergebnis zu erzielen.

PS: Mich interessiert auch, warum sich JavaScript-Variablen so verhalten, wenn jemand gute Artikel zum Thema kennt.

361
Justin Bull

Es scheint, dass einige Leute hier landen und einfach wissen möchten, ob ein Element existiert (ein bisschen anders als die ursprüngliche Frage).

Dies ist so einfach, als würden Sie eine der Auswahlmethoden des Browsers verwenden und (im Allgemeinen) prüfen, ob ein wahrer Wert vorliegt.

Wenn mein Element beispielsweise id von "find-me" hätte, könnte ich einfach ...

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

Dies ist spezifiziert, um entweder einen Verweis auf das Element oder null zurückzugeben. Wenn Sie einen Booleschen Wert benötigen, werfen Sie einfach vor dem Methodenaufruf einen !!.

Darüber hinaus können Sie einige der vielen anderen Methoden zum Suchen von Elementen verwenden, z. B. (alle leben von document):

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

Einige dieser Methoden geben NodeList zurück. Überprüfen Sie daher unbedingt die Eigenschaft length, da NodeList ein Objekt ist und daher wahrheitsgemäß .


Um tatsächlich festzustellen, ob ein Element als Teil des sichtbaren DOM vorhanden ist (wie die ursprünglich gestellte Frage), Csuwldcat bietet eine bessere Lösung als das Rolling Ihres eigenen (wie diese Antwort früher enthielt). Verwenden Sie also die Methode contains() für DOM-Elemente.

Du könntest es so benutzen ...

document.body.contains(someReferenceToADomElement);
478
alex

Warum würden Sie getElementById() nicht verwenden, wenn es verfügbar ist?

Auch hier ist eine einfache Möglichkeit, dies mit jQuery zu tun:

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

Und wenn Sie keine Bibliotheken von Drittanbietern verwenden können, halten Sie sich einfach an JavaScript-Basis:

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

Mit der Node.contains DOM API können Sie ganz einfach prüfen, ob ein Element auf der Seite (derzeit im DOM) vorhanden ist:

document.body.contains(YOUR_ELEMENT_HERE);

CROSS-BROWSER HINWEIS : Das document -Objekt in IE hat keine contains() -Methode - zu Stellen Sie die browserübergreifende Kompatibilität sicher, und verwenden Sie stattdessen document.body.contains()

166
csuwldcat

Ich mache einfach:

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

Funktioniert bei mir und hatte noch keine Probleme damit ....

57
Anomaly

Könnten Sie einfach überprüfen, ob die parentNode -Eigenschaft null ist?

d.h.

if(!myElement.parentNode)
{
    //node is NOT on the dom
}
else
{
    //element is on the dom
}
10
mikechambers

Von Mozilla Developer Network

Diese Funktion prüft, ob sich ein Element im Hauptteil der Seite befindet. As contain is inclusive und das Bestimmen, ob der Body sich selbst enthält, ist nicht die Absicht von isInPage. In diesem Fall wird explizit false zurückgegeben.

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

node ist der Knoten, auf den wir im überprüfen möchten.

10
Ekramul Hoque

Die einfachste Lösung besteht darin, die Eigenschaft baseURI zu überprüfen, die nur festgelegt wird, wenn das Element in das Element eingefügt wird DOM und kehrt zu einer leeren Zeichenfolge zurück, wenn sie entfernt wird.

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>
7
user663031

Eine einfache Möglichkeit, um zu überprüfen, ob ein Element vorhanden ist, bietet der einzeilige Code von jQuery.

Hier ist der Code unten:

if ($('#elementId').length > 0) {
    // do stuff here if element exists
}else {
    // do stuff here if element not exists
}
3
Ravi Agrawal

jQuery-Lösung:

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

Dies funktionierte für mich mit jQuery und erforderte nicht die Verwendung von $('#elementId')[0].

3
Code Buster

csuwldcats Lösung scheint die beste Lösung zu sein, aber es ist eine geringfügige Änderung erforderlich, damit es mit einem Element funktioniert, das sich in einem anderen Dokument befindet als das, in dem Javascript ausgeführt wird, wie z. B. einem iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Beachten Sie die Verwendung der Eigenschaft ownerDocument des Elements im Gegensatz zu der einfachen Eigenschaft document (die sich möglicherweise auf das Besitzerdokument des Elements bezieht oder nicht).

torazaburo hat eine noch einfachere Methode gepostet, die auch mit nicht-lokalen Elementen funktioniert, aber leider die baseURI -Eigenschaft verwendet, die derzeit nicht einheitlich für alle Browser implementiert ist (konnte ich nur bekommen) es in den Webkit-basierten zu arbeiten). Ich konnte keine anderen Element- oder Knoteneigenschaften finden, die auf ähnliche Weise verwendet werden könnten. Daher denke ich, dass die oben genannte Lösung derzeit so gut ist, wie es nur geht.

3
DoctorDestructo

Eine andere Option element.closest :

element.closest('body') === null
2
Brian M. Hunt

Einfache Lösung mit jQuery

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

anstatt die übergeordneten Elemente zu iterieren, können Sie nur das umgebende Rechteck abrufen, bei dem es sich nur um Nullen handelt, wenn das Element von dom getrennt wird

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

wenn Sie den Edge-Fall eines Elements mit einer Breite und Höhe von null oben und null links behandeln möchten, können Sie dies überprüfen, indem Sie die übergeordneten Elemente bis zum document.body iterieren

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;
}
1
Erez Pilosof

Sie können auch jQuery.contains verwenden, um zu überprüfen, ob ein Element von einem anderen Element abstammt. Ich habe document als übergeordnetes Element für die Suche übergeben, da alle auf der Seite DOM vorhandenen Elemente ein Nachkomme von document sind.

_jQuery.contains( document, YOUR_ELEMENT)
_
1
nitinkhuranas
// this will work prefect in all :D     
function basedInDocument(el) {
        // this function use for checking if this element in a real DOM
        while (el.parentElement != null) {
            if (el.parentElement == document.body) {
                return true;
            }
            el = el.parentElement; // for check parent of 
        } // if loop break will return false mean element not in real DOM
        return false;
    }
1
qandil afa

versuchen Sie dies, dies ist die zuverlässigste Lösung:

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

dh:

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
0
dexiang

Überprüfen Sie, ob das Element ein untergeordnetes Element von <html> ist, indem Sie Node::contains() eingeben:

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

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

Ich habe dies und mehr in is-dom-detached behandelt.

0
Steven Vachon

Benutze das:

var isInDOM = function(element, inBody) {
    var _ = element, last;

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

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

Verwenden Sie querySelectorAll mit forEach:

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

im gegenteil zu:

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

Ich mochte diesen Ansatz

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

if( elem )do this
else 
do that

Ebenfalls

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

if( elem ) do this
else
do that
0
Hugh