Comment tester l'existence d'un élément sans avoir recours à l'option getElementById méthode ?
J'ai mis en place un Démonstration en direct pour référence. Je vais également imprimer le code ici :
<!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>En fait, le code ci-dessus montre qu'un élément est stocké dans une variable et ensuite retiré du DOM. Même si l'élément a été retiré du DOM, la variable conserve l'élément tel qu'il était lorsqu'il a été déclaré pour la première fois. En d'autres termes, il ne s'agit pas d'une référence vivante à l'élément lui-même, mais plutôt d'une réplique. Par conséquent, la vérification de l'existence de la valeur de la variable (l'élément) donnera un résultat inattendu.
El isNull est ma tentative de vérifier l'existence d'un élément à partir d'une variable, et cela fonctionne, mais j'aimerais savoir s'il existe un moyen plus simple d'obtenir le même résultat.
PS : Je suis également intéressé par la raison pour laquelle les variables JavaScript se comportent de cette manière si quelqu'un connaît de bons articles sur le sujet.
24 votes
En fait, c'est une référence vivante à l'élément lui-même, il n'est simplement plus dans un document. Cette fonctionnalité est nécessaire parce que vous pouvez retirer un élément du DOM et le remettre plus tard avec tous les gestionnaires d'événements/etc qui lui sont attachés. Pourquoi les variables JS agissent-elles ainsi ? Parce que ce serait incroyablement ennuyeux si elles ne le faisaient pas. JS ne supprime les variables que lorsque vous n'avez plus AUCUNE référence à elles. Le langage n'a aucun moyen de savoir quelles sont les références que vous jugez importantes et celles que vous jugez sans valeur.
0 votes
@cwolves Intéressant. J'ai déjà rencontré cela à plusieurs reprises et je n'y ai jamais vraiment pensé. En fait, dans mon projet actuel, je sauvegarde les éléments dans un tableau avant de les modifier, au cas où je voudrais revenir en arrière.
1 votes
Le ramassage des ordures s'exécute de temps en temps et supprime tout ce qu'il pense pouvoir faire. Il semble plutôt mauvais dans la plupart des navigateurs, mais s'améliore au fur et à mesure que les développeurs se rendent compte que certains navigateurs fonctionnent pendant des jours ou des semaines entre deux redémarrages, de sorte qu'un bon ramassage des déchets est vital pour les performances du navigateur. Les développeurs Web peuvent aider en supprimant les propriétés (et donc les références aux objets en mémoire) qui ne sont plus nécessaires.
2 votes
@JustinBull soyez prudent avec le stockage des copies des éléments à inverser. Lorsque vous stockez un élément DOM dans un tableau, c'est une référence à l'élément DOM qui est stockée, et non une copie, de sorte que les changements apportés à l'élément DOM seront reflétés lors de la référence à l'élément du tableau. C'est le cas avec tous les objets en javascript (variables de type 'object').