Hoe kan ik controleren of een element bestaat in de zichtbare DOM?

Hoe test je een element op bestaan ​​zonder het gebruik van de getElementById-methode?

Ik heb een live demoopgezet ter referentie. Ik zal de code hier ook afdrukken:

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

Kortom, de bovenstaande code laat zien dat een element wordt opgeslagen in een variabele en vervolgens wordt verwijderd uit de DOM. Hoewel het element uit de DOM is verwijderd, behoudt de variabele het element zoals het was toen het voor het eerst werd gedeclareerd. Met andere woorden, het is geen live verwijzing naar het element zelf, maar eerder een replica. Als resultaat zal het controleren van de waarde van de variabele (het element) op bestaan ​​een onverwacht resultaat opleveren.

De functie isNullis mijn poging om te controleren of er elementen uit een variabele bestaan, en het werkt, maar ik zou graag willen weten of er een eenvoudigere manier is om hetzelfde resultaat te bereiken.

p>

PS: Ik ben ook geïnteresseerd in waarom JavaScript-variabelen zich zo gedragen als iemand goede artikelen kent die met het onderwerp te maken hebben.


Antwoord 1, autoriteit 100%

Het lijkt erop dat sommige mensen hier landen en gewoon willen weten of een element bestaat(een beetje anders dan de oorspronkelijke vraag).

Dat is net zo eenvoudig als het gebruik van een van de selectiemethoden van de browser en deze te controleren op een waarheid-waarde (in het algemeen).

Als mijn element bijvoorbeeld een idvan "find-me"had, zou ik gewoon kunnen gebruiken…

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

Dit is opgegeven om ofwel een verwijzing naar het element te retourneren, ofwel null. Als je een Booleaanse waarde moet hebben, gooi dan gewoon een !!voor de methodeaanroep.

Bovendien kunt u enkele van de vele andere methoden gebruiken die bestaan ​​om elementen te vinden, zoals (allemaal levend van document):

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

Sommige van deze methoden retourneren een NodeList, dus zorg ervoor dat u de eigenschap lengthcontroleert, omdat een NodeListeen object is en daarom waarheid.


Om daadwerkelijk te bepalen of een element bestaat als onderdeel van de zichtbare DOM (zoals de oorspronkelijk gestelde vraag), Csuwldcat biedt een betere oplossing dan zelf rollen(zoals dit antwoord vroeger bevatte). Dat wil zeggen, om de contains()-methode op DOM-elementen.

Je zou het zo kunnen gebruiken…

document.body.contains(someReferenceToADomElement);

Antwoord 2, autoriteit 53%

Gebruik getElementById()als het beschikbaar is.

Hier is ook een gemakkelijke manier om het te doen met jQuery:

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

En als je geen bibliotheken van derden kunt gebruiken, blijf dan gewoon bij JavaScript:

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

Antwoord 3, autoriteit 34%

Met behulp van de Node.contains DOM API, je kunt vrij eenvoudig controleren op de aanwezigheid van elk element op de pagina (momenteel in de DOM):

document.body.contains(YOUR_ELEMENT_HERE);

CROSS-BROWSER OPMERKING: het documentobject in Internet Explorer heeft geen contains()methode – om cross-browser te garanderen compatibiliteit, gebruik in plaats daarvan document.body.contains().


Antwoord 4, autoriteit 12%

Ik doe gewoon:

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

Het werkt voor mij en had er nog geen problemen mee…


Antwoord 5, autoriteit 2%

Van Mozilla Developer Network:

Deze functie controleert of een element in de hoofdtekst van de pagina staat. Omdat bevat() inclusief is en bepalen of de hoofdtekst zichzelf bevat niet de bedoeling is van isInPage, retourneert dit geval expliciet false.

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

knooppuntis het knooppunt dat we willen controleren in de <body>.


Antwoord 6, autoriteit 2%

Je zou gewoon kunnen controleren of de eigenschap parentNode null is.

Dat wil zeggen,

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

Antwoord 7, autoriteit 2%

Ik gebruik liever de eigenschap node.isConnected(Bezoek MDN).

Opmerking: dit wordt true geretourneerd als het element ook aan een ShadowRoot wordt toegevoegd, wat mogelijk niet het gewenste gedrag van iedereen is.

Voorbeeld:

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

Antwoord 8

De eenvoudigste oplossing is om de baseURI te controleren eigenschap, die alleen wordt ingesteld wanneer het element in de DOM wordt ingevoegd, en keert terug naar een lege tekenreeks wanneer het wordt verwijderd.

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>

Antwoord 9

jQuery-oplossing:

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

Dit werkte voor mij bij het gebruik van jQuery en het was niet nodig om $('#elementId')[0]te gebruiken.


Antwoord 10

Een eenvoudige manier om te controleren of een element bestaat, kan worden gedaan door middel van de eenregelige code van jQuery.

Hier is de onderstaande code:

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

Antwoord 11

Deze code werkt voor mij en ik had er geen problemen mee.


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

Antwoord 12

van csuwldcat oplossinglijkt de beste van het stel, maar er is een kleine aanpassing nodig om het correct te laten werken met een element dat zich in een ander document bevindt dan de JavaScript-code waarin de JavaScript-code wordt uitgevoerd, zoals een iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Let op het gebruik van de eigenschap ownerDocumentvan het element, in tegenstelling tot een gewoon oud document(dat al dan niet verwijst naar het eigenaarsdocument van het element).

torazaburo heeft een nog eenvoudigere methodedie ook werkt met niet-lokale elementen, maar helaas gebruikt deze de eigenschap baseURI, die op dit moment niet uniform is geïmplementeerd in alle browsers (ik kon het alleen om te werken in de WebKit-gebaseerde versies). Ik kon geen andere eigenschappen van elementen of knooppunten vinden die op een vergelijkbare manier zouden kunnen worden gebruikt, dus ik denk dat de bovenstaande oplossing voorlopig zo goed mogelijk is.


Antwoord 13

In plaats van ouders te herhalen, kun je gewoon de begrenzende rechthoek krijgen die allemaal nullen is wanneer het element wordt losgemaakt van de DOM:

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

Als u het randgeval van een nul-breedte- en hoogte-element op nul boven en nul links wilt afhandelen, kunt u dit dubbel controleren door de ouders te herhalen tot de 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;
}

Antwoord 14

Gemakkelijkste manier:

const cond = document.getElementById('elem') || false
if (cond) {
    //does
} else {
    //does not
}

Gebruik indien nodig in strikt zichtbare DOM, dus niet op de hele pagina, iets als view-js (mijn lib dus versla het zo veel als je wilt)


<script src='https://view-js.glitch.me/view-main.js'></script>
<script>
elem = $sel('#myelem');
if (isVis(elem)) { //yes } else { //no }
</script>

function test() {
  pt = document.querySelector('#result')
  iv = document.querySelector('#f')
  cond = document.querySelector('#'+iv.value) || false
if (cond) {
    pt.innerText = 'Found!'
} else {
    pt.innerText = 'Not found!'
    }
}
  
Enter an id to see if it exists: <input id='f'></input>
<button onclick='test()'>Test!</button>
<br />
<p id='result'>I am a p tag. I will change depending on the result.</p>
<br />
<div id='demo'>I am a div. My id is demo.</div>

Antwoord 15

Een andere optie is element.closest:

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

Antwoord 16

U kunt ook jQuery.containsgebruiken, die controleert of een element een afstammeling is van een ander element. Ik heb documentdoorgegeven als het bovenliggende element om te zoeken, omdat alle elementen op de pagina DOM een afstammeling zijn van document.

jQuery.contains( document, YOUR_ELEMENT)

Antwoord 17

Controleer of het element een onderliggend element is van <html>via Node::contains():

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

Ik heb dit en meer behandeld in is-dom-detached.


Antwoord 18

Een eenvoudige oplossing met jQuery:

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

Antwoord 19

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

Antwoord 20

Alle bestaande elementen hebben een parentElement-set, behalve het HTML-element!

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

Antwoord 21

  • Als een element in de DOMstaat, moeten de ouders ook in
  • . staan

  • En de laatste grootouder moet het document
  • zijn

Dus om te controleren of we gewoon naar de parentNode-boom van het element gaan totdat we de laatste grootouder bereiken

Gebruik dit:

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

Antwoord 22

deze aandoening heeft alle gevallen.

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

Antwoord 23

Gebruik deze opdracht hieronder om terug te geven of het element al dan niet in de DOM bestaat:

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

Antwoord 24

Controleer of het element bestaat of niet

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

Antwoord 25

Ik vond deze aanpak leuk:

var elem = document.getElementById('elementID');
if (elem)
    do this
else
    do that

Ook

var elem = ((document.getElementById('elemID')) ? true:false);
if (elem)
    do this
else
    do that

Antwoord 26

Gebruik querySelectorAllmet forEach,

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

als het tegenovergestelde van:

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

Antwoord 27

Probeer het volgende. Het is de meest betrouwbare oplossing:

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

Bijvoorbeeld

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'

Antwoord 28

Omdat ik hier belandde vanwege de vraag. Weinig van de bovenstaande oplossingen lossen het probleem niet op. Na een paar zoekacties vond ik een oplossing op internet die opleverde of een knooppunt aanwezig is in de huidige viewport waar de antwoorden die ik probeerde op te lossen of het in het lichaam aanwezig is of niet.

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

Het fragment is afkomstig van HIERom als back-up te bewaren, aangezien de links na enige tijd mogelijk niet meer beschikbaar zijn. Check de link voor uitleg.

En was niet van plan om in de reactie te posten, omdat ze in de meeste gevallen worden genegeerd.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nineteen − 10 =

Other episodes