Comment testez-vous l'existence d'un élément sans utiliser la getElementByIdméthode?
J'ai mis en place une démo en direct pour référence. Je vais également imprimer le code ici également:
<!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>Fondamentalement, le code ci-dessus montre qu'un élément est stocké dans une variable, puis supprimé du DOM. Même si l'élément a été supprimé du DOM, la variable conserve l'élément tel qu'il était lors de sa première déclaration. En d'autres termes, ce n'est pas une référence en direct à l'élément lui-même, mais plutôt une réplique. Par conséquent, la vérification de l'existence de la valeur de la variable (l'élément) fournira un résultat inattendu.
La isNullfonction est ma tentative de vérifier l'existence d'un élément à partir d'une variable, et cela fonctionne, mais je voudrais savoir s'il existe un moyen plus simple d'obtenir le même résultat.
PS: Je m'intéresse également aux raisons pour lesquelles les variables JavaScript se comportent comme cela si quelqu'un connaît de bons articles liés au sujet.
Réponses:
Il semble que certaines personnes atterrissent ici et veulent simplement savoir si un élément existe (un peu différent de la question d'origine).
C'est aussi simple que d'utiliser l'une des méthodes de sélection du navigateur et de vérifier sa véracité valeur ( en général).
Par exemple, si mon élément avait un
idof"find-me", je pourrais simplement utiliser ...Ceci est spécifié pour renvoyer une référence à l'élément ou
null. Si vous devez avoir une valeur booléenne, lancez simplement un!!avant l'appel de méthode.En outre, vous pouvez utiliser certaines des nombreuses autres méthodes qui existent pour trouver des éléments, tels que (tous vivant
document):querySelector()/querySelectorAll()getElementsByClassName()getElementsByName()Certaines de ces méthodes renvoient a
NodeList, alors assurez-vous de vérifier salengthpropriété, car aNodeListest un objet, et donc véridique .Pour déterminer réellement si un élément existe dans le DOM visible (comme la question posée à l'origine), Csuwldcat fournit une meilleure solution que de rouler le vôtre (comme cette réponse contenait autrefois). Autrement dit, pour utiliser le
contains()méthode sur les éléments DOM.Vous pouvez l'utiliser comme ça ...
la source
var elementInDom = function( el ) { while ( el = el.parentNode ) if ( el === document ) return true; return false; }getElementById()elle renverra une référence à un élément DOM ounull, par conséquent, l'utilisationtypeof(en particulier sur le RHS) est incorrecte (si elle n'était pas définie, la condition LHS renverrait aReferenceError).document.body.contains()qui semble avoir un très bon support pour le navigateur?À utiliser
getElementById()s'il est disponible.En outre, voici un moyen simple de le faire avec jQuery:
Et si vous ne pouvez pas utiliser de bibliothèques tierces, respectez simplement le code JavaScript de base:
la source
$('#elementId')[0].lengthne produirait pas le même résultat.if (element) {}? Lorsque l'élément est indéfini ou nul, cette expression est fausse. Si l'élément est un élément DOM, l'expression est vraie.getElementById()est spécifié pour retournernulls'il n'a pas trouvé l'élément, donc il suffit de vérifier une valeur retournée véridique .getElementByIdne devrait jamais revenirundefined. Dans tous les cas, leelement != nullchèque reprendrait cela.En utilisant l' API DOM Node.contains , vous pouvez vérifier la présence de tout élément dans la page (actuellement dans le DOM) assez facilement:
CROSS-BROWSER REMARQUE : l'
documentobjet dans Internet Explorer n'a pas decontains()méthode - pour assurer la compatibilité entre les navigateurs, utilisezdocument.body.contains()plutôt.la source
document.contains()devrait suffire.document.contains(document.documentElement).documentaNodesur sa chaîne prototype, pour autant que je sache (document->HTMLDocument->Document->Node)document.body.contains([selector]), c'estdocument.body.contains(document.getElementById('div')Je fais simplement:
Cela fonctionne pour moi et je n'ai eu aucun problème avec ça encore ...
la source
id. La meilleure solution qui répond à la question Comment vérifier si l'élément existe dans le DOM visible? avec n'importe quel élément, même les éléments sansids est à fairedocument.body.contains(element).contains()Vous pouvez simplement vérifier si la propriété parentNode est nulle.
C'est,
la source
De Mozilla Developer Network :
Cette fonction vérifie si un élément se trouve dans le corps de la page. Comme contains () est inclusif et déterminer si le corps se contient n'est pas l'intention d'isInPage, ce cas renvoie explicitement false.
nœud est le nœud que nous voulons vérifier dans le <body>.
la source
falseêtre ainsitrue?nodeIS ledocument.body, sûrement la méthode doit revenirtrue? C'est à dire,return (node === document.body) || document.body.contains(node);La solution la plus simple consiste à vérifier la propriété baseURI , qui n'est définie que lorsque l'élément est inséré dans le DOM, et elle revient à une chaîne vide lorsqu'elle est supprimée.
la source
Cannot read property 'baseURI' of null. Exemple:console.log(document.querySelector('aside').baseURI)Solution jQuery:
Cela a fonctionné pour moi en utilisant jQuery et n'a pas nécessité
$('#elementId')[0]d'être utilisé.la source
$('#elementId')[0]faut-il éviter quelque chose?La solution de csuwldcat semble être la meilleure du lot, mais une légère modification est nécessaire pour qu'elle fonctionne correctement avec un élément qui se trouve dans un document différent de celui dans lequel le code JavaScript s'exécute, tel qu'un iframe:
Notez l'utilisation de la
ownerDocumentpropriété de l'élément , par opposition à tout simplement anciendocument(qui peut ou non faire référence au document du propriétaire de l'élément).torazaburo a affiché une méthode encore plus simple fonctionne aussi que des éléments non locaux, mais malheureusement, il utilise la
baseURIpropriété, qui n'est pas appliquée uniformément à travers les navigateurs à ce moment (je ne pouvais le faire fonctionner dans le WebKit ceux à base). Je n'ai trouvé aucun autre élément ou propriété de nœud qui pourrait être utilisé de la même manière, donc je pense que pour l'instant la solution ci-dessus est aussi bonne que possible.la source
Au lieu d'itérer les parents, vous pouvez simplement obtenir le rectangle englobant qui est tout à zéro lorsque l'élément est détaché du DOM:
Si vous souhaitez gérer le cas de bord d'un élément de largeur et de hauteur nul en haut en haut et zéro à gauche, vous pouvez vérifier deux fois en itérant les parents jusqu'à ce que
document.body:la source
Un moyen simple de vérifier si un élément existe peut être fait via le code à une ligne de jQuery.
Voici le code ci-dessous:
la source
Une autre option est element.closest :
la source
Ce code fonctionne pour moi et je n'ai eu aucun problème avec lui.
la source
Vous pouvez également utiliser
jQuery.contains, qui vérifie si un élément est un descendant d'un autre élément. Je suis passé endocumenttant qu'élément parent à rechercher car tous les éléments qui existent sur la page DOM sont des descendants dedocument.la source
Vérifiez si l'élément est un enfant de
<html>viaNode::contains():J'ai couvert cela et plus dans is-dom-détaché .
la source
Une solution simple avec jQuery:
la source
$(document).find(yourElement).length !== 0null == undefined. La vraie valeur retournée seraitundefined. Le comparernullest un peu bizarre.la source
DOM, ses parents doivent également être endocumentDonc, pour vérifier que nous bouclons simplement vers l'
parentNodearbre de l'élément jusqu'à ce que nous atteignions le dernier grand-parentUtilisez ceci:
la source
J'ai aimé cette approche:
Aussi
la source
!!si vous voulez un booléen?Utiliser
querySelectorAllavecforEach,comme l'opposé de:
la source
Essayez ce qui suit. C'est la solution la plus fiable:
Par exemple,
la source
Tous les éléments existants ont parentElement défini, sauf l'élément HTML!
la source
cette condition poussin tous les cas.
la source
Je préfère utiliser la
node.isConnectedpropriété ( visitez MDN ).Remarque: Cela retournera vrai si l'élément est également ajouté à un ShadowRoot, ce qui pourrait ne pas être le comportement de tout le monde.
Exemple:
la source