Comment testez-vous l'existence d'un élément sans utiliser la getElementById
mé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 isNull
fonction 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.