web-dev-qa-db-fra.com

Comment vérifier si l'élément existe dans le DOM visible?

Comment testez-vous l'existence d'un élément sans utiliser la méthode getElementById? J'ai mis en place un démo en direct pour référence. Je vais aussi imprimer le code ici aussi:

<!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é de dom. Même si l'élément a été retiré du dom, la variable le conserve tel qu'il était lors de sa première déclaration. En d'autres termes, il ne s'agit pas d'une référence active à l'élément lui-même, mais plutôt d'une réplique. En conséquence, vérifier l'existence de la valeur de la variable (l'élément) donnera un résultat inattendu.

La fonction isNull est ma tentative de vérifier l'existence d'éléments à 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 voudrais aussi savoir pourquoi les variables JavaScript se comportent de la sorte si quelqu'un connaît de bons articles sur le sujet.

javascriptdomvariableselementexists
361
Justin Bull

Il semble que certaines personnes atterrissent ici et veulent simplement savoir si un élément existe (un peu différent de la question initiale).

C'est aussi simple que d'utiliser une méthode de sélection du navigateur et de la vérifier pour une valeur vérité (en général).

Par exemple, si mon élément avait une id de "find-me", je pourrais simplement utiliser ...

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

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 la méthode.

En outre, vous pouvez utiliser certaines des nombreuses autres méthodes existantes pour rechercher des éléments, telles que (toutes les personnes vivant au large de document):

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

Certaines de ces méthodes renvoient un NodeList, vous devez donc vérifier sa propriété length, car un NodeList est un objet, et donc vérité .

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 le contenait). Autrement dit, utiliser la méthode contains() sur les éléments DOM.

Vous pourriez l'utiliser comme si ...

document.body.contains(someReferenceToADomElement);
478
alex

Pourquoi ne pas utiliser getElementById() s'il est disponible?

En outre, voici un moyen simple de le faire avec jQuery:

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

Et si vous ne pouvez pas utiliser de bibliothèques tierces, restez sur JavaScript:

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

En utilisant Node.contains DOM API , vous pouvez facilement vérifier la présence de tout élément de la page (actuellement dans le DOM):

document.body.contains(YOUR_ELEMENT_HERE);

NOTE DE CROSS-BROWSER : l'objet document de IE n'a pas de méthode contains() - pour assurer la compatibilité entre les navigateurs, utilisez plutôt document.body.contains()

166
csuwldcat

Je fais simplement:

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

Fonctionne pour moi et je n'ai encore eu aucun problème avec cela ....

57
Anomaly

Pourriez-vous simplement vérifier si la propriété parentNode est null?

c'est à dire.

if(!myElement.parentNode)
{
    //node is NOT on the dom
}
else
{
    //element is on the dom
}
10
mikechambers

De Réseau de développeurs Mozilla

Cette fonction vérifie si un élément est dans le corps de la page. As contient est inclusif et déterminer si le corps lui-même n'est pas l'intention de isInPage ce cas retourne explicitement la valeur false.

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

noeud est le noeud que nous voulons vérifier dans le fichier.

10
Ekramul Hoque

La solution la plus simple consiste à vérifier la propriété baseURI , définie uniquement lorsque l'élément est inséré dans le DOM, puis rétablie une chaîne vide lorsqu'elle est supprimée.

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

Un moyen simple de vérifier si un élément existe peut être utilisé avec le code d'une ligne de jQuery.

Voici le code ci-dessous:

if ($('#elementId').length > 0) {
    // do stuff here if element exists
}else {
    // do stuff here if element not exists
}
3
Ravi Agrawal

solution jQuery:

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

Cela fonctionnait pour moi avec jQuery et ne nécessitait pas l'utilisation de $('#elementId')[0].

3
Code Buster

la solution de csuwldcat semble être le meilleur du lot, mais une légère modification est nécessaire pour le faire fonctionner correctement avec un élément figurant dans un document différent de celui dans lequel le javascript est exécuté, tel qu'un iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Notez l'utilisation de la propriété ownerDocument de l'élément, par opposition à la simple expression 'document (qui peut ou non faire référence au document propriétaire de l'élément).

torazaburo a publié une méthode encore plus simple qui fonctionne également avec des éléments non locaux, mais malheureusement, il utilise la propriété baseURI, qui n'est pas implémentée de manière uniforme sur tous les navigateurs (je ne pouvais obtenir que cela fonctionne dans les webkit). Je ne pouvais trouver aucune autre propriété d'élément ou de nœud pouvant être utilisée de la même manière, donc je pense que pour le moment, la solution ci-dessus est aussi performante que possible.

3
DoctorDestructo

Une autre option element.closest :

element.closest('body') === null
2
Brian M. Hunt

Solution simple avec jQuery

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

au lieu d'itérer les parents, vous pouvez simplement obtenir le rectangle de délimitation, composé de zéros lorsque l'élément est détaché de dom

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

si vous voulez gérer la casse d'un élément de largeur et hauteur zéro à zéro en haut et à gauche, vous pouvez vérifier en itérant les parents jusqu'à la fin du document.

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;
}
1
Erez Pilosof

Vous pouvez également utiliser jQuery.contains , qui vérifie si un élément est un descendant d'un autre élément. J'ai transmis document en tant qu'élément parent à rechercher, car tous les éléments présents dans la page DOM sont des descendants de document.

_jQuery.contains( document, YOUR_ELEMENT)
_
1
nitinkhuranas
// this will work prefect in all :D     
function basedInDocument(el) {
        // this function use for checking if this element in a real DOM
        while (el.parentElement != null) {
            if (el.parentElement == document.body) {
                return true;
            }
            el = el.parentElement; // for check parent of 
        } // if loop break will return false mean element not in real DOM
        return false;
    }
1
qandil afa

essayez ceci, c'est la solution la plus fiable:

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

c'est à dire:

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
0
dexiang

Vérifiez si l'élément est un enfant de <html> via Node::contains() :

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

document.body.appendChild(div);
document.documentElement.contains(div); //-> true

J'ai couvert cela et plus dans is-dom-détaché .

0
Steven Vachon

Utilisez ceci:

var isInDOM = function(element, inBody) {
    var _ = element, last;

    while (_) {
        last = _;
        if (inBody && last === document.body) { break;}
        _ = _.parentNode;
    }

    return inBody ? last === document.body : last === document;
};
0
silassare

Utilisez querySelectorAll avec forEach:

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

comme l'inverse de:

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

J'ai aimé cette approche

var elem = document.getElementById('elementID');

if( elem )do this
else 
do that

Aussi

var elem = ((document.getElementById('elemID')) ? true:false);

if( elem ) do this
else
do that
0
Hugh