web-dev-qa-db-fra.com

Si if (document.getElementById ('quelque chose')! = Null) est-il identique à if (document.getElementById ('quelque chose'))?

Quand je veux vérifier si un élément existe dans une page. Ces deux chèques sont-ils les mêmes? Existe-t-il un moyen plus compact de vérifier l’existence?

Et si je veux vérifier si le value == ''. Cela peut-il également être inclus dans ce chèque?

javascriptjquerydom
24
Malik Daud Ahmad Khokhar

Une référence à un élément n'aura jamais l'air "falsy", il est donc prudent de laisser le contrôle de nullité explicite.

Javascript traitera les références à certaines valeurs dans un contexte booléen comme suit: false: undefined, null, zéro numérique et NaN et des chaînes vides. Mais ce que getElementById renvoie sera soit une référence d’élément, soit null. Ainsi, si l'élément est dans le DOM, la valeur de retour sera une référence d'objet et toutes les références d'objet sont true dans un test if (). Si l'élément est not dans le DOM, la valeur de retour serait null et null est toujours false dans un test if ().

Il est inoffensif d'inclure la comparaison, mais personnellement, je préfère éviter les morceaux de code qui ne font rien, car chaque fois que mon doigt frappe sur le clavier, il se peut que je crée un bogue :)

Notez que ceux qui utilisent jQuery devraient not faire ceci:

if ($('#something')) { /* ... */ }

parce que la fonction jQuery retournera toujours quelque chose de "vérité" - même si aucun élément n'est trouvé, jQuery renvoie une référence d'objet. Au lieu:

if ($('#something').length) { /* ... */ }

edit - pour vérifier le value d'un élément, non, vous ne pouvez pas le faire en même temps que vous vérifiez l'existence de l'élément lui-même directement avec les méthodes DOM. Encore une fois, la plupart des cadres rendent cela relativement simple et propre, comme d’autres l’ont souligné dans leurs réponses. 

28
Pointy

Il vaut mieux (mais plus verbeux) utiliser:

var element = document.getElementById('something');
if (element != null && element.value == '') {
}

Veuillez noter que la première version de ma réponse était fausse:

var element = document.getElementById('something');
if (typeof element !== "undefined" && element.value == '') {
}

parce que getElementById() renvoie toujours un objet (objet null si non trouvé) et que la vérification de"undefined" ne renverrait jamais false, car typeof null !== "undefined" est toujours true.

15
Andir

Fais-le comme ça:

if (! document.getElementById ("someId") {/ Du code. Notez le NOT (!) dans l’expression /};

Si l'élément avec l'id "someId" n'existe pas, expression retournera TRUE (NOT FALSE === TRUE) ou! False === true;

essayez ce code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="format-detection" content="telephone-no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
        <title>Test</title>
    </head>
    <body>
      <script>
var createPerson = function (name) {
    var person;
    if (!document.getElementById(name)) {
        alert("Element does not exist. Let's create it.");
      person = document.createElement("div");
//add argument name as the ID of the element
      person.id = name;
//append element to the body of the document
      document.body.appendChild(person);
    } else {
        alert("Element exists. Lets get it by ID!");
      person = document.getElementById(name);
    }
    person.innerHTML = "HI THERE!";

};
//run the function.
createPerson("someid");
          </script>
       </body>
</html>

Essayez ceci dans votre navigateur et il devrait alerter "L'élément n'existe pas. Créons-le". 

Maintenant, ajoutez 

<div id="someid"></div>

dans le corps de la page et réessayez. Voila! :)

5
Gawran

document.getElementById ('quelque chose') peut être 'non défini'. Habituellement (mais pas toujours), il suffit de faire des tests comme if (document.getElementById('something')).

2
Robusto

La version la plus propre est particulièrement utile si vous voulez simplement obtenir le .value de l'élément.

document.getElementById('elementsid') ? function_if_exists(); function_if_doesnt_exists();
0
Pedro Pereira

Ouais. Essayez ceci .. l'évaluation paresseuse devrait empêcher la deuxième partie de la condition d'évaluer lorsque la première partie est fausse/nulle

var someval = document.getElementById('something')
if (someval && someval.value <> '') {
0
Fosco

jquery vous fournira ceci et plus encore ...

if($("#something").val()){ //do stuff}

Il m'a fallu quelques jours pour le récupérer, mais il vous fournit beaucoup plus de fonctionnalités. Un exemple ci-dessous.

jQuery(document).ready(function() {
    /* finds closest element with class divright/left and 
    makes all checkboxs inside that div class the same as selectAll...
    */
        $("#selectAll").click(function() {
        $(this).closest('.divright').find(':checkbox').attr('checked', this.checked);
    });
});
0
NimChimpsky