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

1voto

Omar bakhsh Punkte 776

diese Bedingung in allen Fällen zu erfüllen.

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

}

Beantwortet el 7 de April, 2020 von Omar bakhsh (776 Punkte )

Answer 3

1voto

MD SHAYON Punkte 6992

Prüfen, ob Element vorhanden ist oder nicht

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

Beantwortet el 25 de Dezember, 2020 von MD SHAYON (6992 Punkte )

Answer 4

0voto

Rafal Enden Punkte 2678

Utilisez querySelectorAll をもって forEach ,

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

als das Gegenteil von:

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

Beantwortet el 23 de August, 2018 von Rafal Enden (2678 Punkte )

Answer 5

0voto

nitinkhuranas Punkte 31

Sie können auch Folgendes verwenden jQuery.contains die prüft, ob ein Element ein Nachkomme eines anderen Elements ist. Ich habe in document als das zu durchsuchende übergeordnete Element, da alle Elemente, die im DOM der Seite vorhanden sind, ein Nachkomme von document .

jQuery.contains( document, YOUR_ELEMENT)

Beantwortet el 9 de August, 2017 von nitinkhuranas (31 Punkte )

Answer 6

0voto

ssi-anik Punkte 2272

Ich bin hier gelandet, weil ich eine Frage hatte. Einige der Lösungen von oben lösen das Problem nicht. Nach ein paar Nachschlagen, fand ich eine Lösung im Internet, die zur Verfügung gestellt, wenn ein Knoten im aktuellen Ansichtsfenster vorhanden ist, wo die Antworten, die ich versucht, löst es im Körper vorhanden ist oder nicht.

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

Der Ausschnitt stammt aus HIER als Backup aufzubewahren, da die Links nach einiger Zeit nicht mehr verfügbar sein könnten. Prüfen Sie den Link, um eine Erklärung zu erhalten.

Und ich hatte nicht die Absicht, einen Kommentar zu verfassen, denn in den meisten Fällen werden sie ignoriert.

Beantwortet el 24 de Januar, 2021 von ssi-anik (2272 Punkte )

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: