Wie kann ich prüfen, ob ein Element im sichtbaren DOM existiert?

Question

Wie kann ich prüfen, ob ein Element im sichtbaren DOM existiert?

Gefragt el 12 de April, 2011: Wann wurde die Frage gestellt
1226140 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Wie testet man ein Element auf seine Existenz ohne die Verwendung der getElementById Methode?

Ich habe eine Live-Demo als Referenz. 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>

Der obige Code zeigt, wie ein Element in einer Variablen gespeichert und dann aus dem DOM entfernt wird. Auch wenn 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 einen Live-Verweis auf das Element selbst, sondern um eine Kopie. Daher wird die Überprüfung des Variablenwerts (des Elements) auf Existenz ein unerwartetes Ergebnis liefern.

El isNull Funktion ist mein Versuch, das Vorhandensein eines Elements aus einer Variablen zu überprüfen, und es funktioniert, aber ich würde gerne wissen, ob es einen einfacheren Weg gibt, um das gleiche Ergebnis zu erzielen.

PS: Ich bin auch daran interessiert, warum JavaScript-Variablen verhalten sich so, wenn jemand weiß, einige gute Artikel zu diesem Thema.

Gefragt el 12 de April, 2011 von Justin Bull

28 Stimmen

Eigentlich ist es ein aktiver Verweis auf das Element selbst, es befindet sich nur nicht mehr in einem Dokument. Diese Funktionalität ist erforderlich, weil Sie tatsächlich ein Element aus dem DOM herausziehen und es später wieder einfügen können, wobei alle Ereignishandler usw. immer noch mit ihm verbunden sind. Und warum verhalten sich JS-Variablen so? Weil es unglaublich ärgerlich wäre, wenn sie es nicht täten. JS löscht Variablen nur, wenn Sie nicht mehr JEDEN Verweis auf sie haben. Die Sprache hat keine Möglichkeit zu wissen, welche Verweise Sie für wichtig halten und welche Sie für wertlos halten.

Kommentiert el 12 de April, 2011 von None

0 Stimmen

@cwolves Interessant. Ich bin schon oft darauf gestoßen und habe mir nie viel dabei gedacht. In meinem aktuellen Projekt speichere ich Elemente in einem Array, bevor ich sie ändere, nur für den Fall, dass ich die Änderungen rückgängig machen möchte.

Kommentiert el 12 de April, 2011 von Justin Bull

1 Stimmen

Die Garbage Collection läuft von Zeit zu Zeit und löscht alles, was sie für möglich hält. Sie scheint in den meisten Browsern ziemlich lausig zu sein, wird aber immer besser, da die Entwickler erkennen, dass einige Browser tagelang oder wochenlang zwischen zwei Neustarts laufen, so dass eine gute Garbage Collection für die Leistung des Browsers entscheidend ist. Webentwickler können dazu beitragen, indem sie Eigenschaften (und damit Verweise auf Dinge im Speicher) löschen, die nicht mehr benötigt werden.

Kommentiert el 12 de April, 2011 von RobG

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

3voto

Erez Pilosof Punkte 81

Anstatt die Eltern zu iterieren, können Sie einfach das Begrenzungsrechteck abrufen, das alle Nullen ist, wenn das Element vom DOM abgetrennt 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 Randfall eines Null-Breite- und Höhe-Elements bei Null oben und Null links behandeln wollen, können Sie das überprüfen, indem Sie die Eltern so lange iterieren, bis die 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;
}

Beantwortet el 10 de Juni, 2018 von Erez Pilosof (81 Punkte )

1 Stimmen

Dies führt zu einer Neuplanung: gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metrics

Kommentiert el 17 de Juni, 2019 von Steven Vachon

Answer 3

3voto

Code Buster Punkte 187

jQuery-Lösung:

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

Dies funktionierte bei mir mit jQuery und erforderte keine $('#elementId')[0] verwendet werden.

Beantwortet el 6 de Dezember, 2012 von Code Buster (187 Punkte )

0 Stimmen

Warum ist $('#elementId')[0] etwas, das man vermeiden sollte?

Kommentiert el 1 de Juni, 2016 von alex

0 Stimmen

Es ist lange her, dass ich das beantwortet habe. Also, mit $('#elementId')[0] glaube ich, dass Sie immer angeben, dass der Wert am 0. Auf diese Weise prüfen Sie immer auf das 1. vorkommende Element. Was wäre, wenn es mehrere Kontrollkästchen mit demselben Namen gäbe, also wie ein Radio-Button. In diesem Fall wäre die .length hilfreich.

Kommentiert el 29 de Marsch, 2018 von Code Buster

Answer 4

2voto

silassare Punkte 87

Befindet sich ein Element in der DOM sollten seine Eltern auch in
Und der letzte Großelternteil sollte der document

Um das zu überprüfen, müssen wir nur eine Schleife bis zum Element parentNode Baum, bis wir den letzten Großelternteil erreichen

Verwenden Sie dies:

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

Beantwortet el 10 de Januar, 2018 von silassare (87 Punkte )

2 Stimmen

Dies könnte die beste Antwort sein, da sie keine Neuberechnung im DOM verursacht.

Kommentiert el 17 de Juni, 2019 von Steven Vachon

0 Stimmen

Eine Erklärung wäre angebracht (Antwort bis Bearbeitung Ihrer Antwort , nicht hier in den Kommentaren).

Kommentiert el 29 de Januar, 2020 von Peter Mortensen

Answer 5

2voto

Renato Gonçalves Punkte 29

Verwenden Sie den folgenden Befehl, um festzustellen, ob das Element im DOM vorhanden ist oder nicht:

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

Beantwortet el 10 de August, 2020 von Renato Gonçalves (29 Punkte )

Answer 6

1voto

qandil afa Punkte 32

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

Beantwortet el 14 de August, 2019 von qandil afa (32 Punkte )

0 Stimmen

In was? In allen Fällen?

Kommentiert el 29 de Januar, 2020 von Peter Mortensen

Wie kann ich prüfen, ob ein Element im sichtbaren DOM existiert?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich prüfen, ob ein Element im sichtbaren DOM existiert?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: