IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Javascript et arborescence du DOM


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2017
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2017
    Messages : 3
    Points : 5
    Points
    5
    Par défaut Javascript et arborescence du DOM
    Bonjour,
    Je suis en train d'apprendre le javascript mais j'ai quelques soucis parfois pour naviguer dans l'arborescence.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Tuto</title>
     
        <style>
            form {
                margin: auto;
                width: 200px;
                display: flex;
                justify-content: center;
                min-height: 50vh;
                align-items: center;
                flex-direction: column;
            }
     
            div {
                border:10px solid blue;
                margin: auto;
                width: 60px;
                text-align: center;
                  
            }
        </style>
     
    </head>
    <body>
     
        <form name="monformulaire">
            <input type="text" name= nomdemontext placeholder="Pseudo"/>
            <button type="submit">S'inscrire</button>
        </form>
     
        <div></div>
     
        <script type="text/javascript" src="main.js"></script>
    </body>
    </html>

    et le JS

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    const myDoc = document.querySelector("form");
     
    myDoc.addEventListener ("submit", function(event) {
        const rentre = document.monformulaire.nomdemontext.value;
        console.log(rentre);
        event.preventDefault();
    })
    C'est un HTML tout simple avec un formulaire et quand on rentre une valeur je la console.log.

    Pour récupérer la valeur de mon formulaire j'ai const rentre = document.monformulaire.nomdetontext.value
    Pourquoi pour y accéder je dois faire document.monformulaire... et pas document.body.monformulaire... ?
    Le form que j'appelle mon formulaire est bien sous body ?

    Même question pour const myDoc = document.querySelector("form");
    Pourquoi n'est ce pas document.body.quesrySelector("form") ?

    Merci de votre aide

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    J’ai envie de répondre « parce que c’est comme ça ». En réalité il n’y a pas vraiment d’explication logique.

    On peut trouver ça logique d’une certaine façon si on connaît l’histoire de telle ou telle propriété. Par exemple, le fait que document.monformulaire existe. Ça vient d’un vieux navigateur (sans doute de l’époque IE / Netscape mais je n’ai pas les détails) dont les développeurs ont pensé que ce serait une bonne idée de mettre en accès rapide sur document tout ce qui porte un name dans la page. Le temps qu’ils se rendent compte que ça pouvait rentrer en conflit avec de « vraies » propriétés de document (par exemple, que se passe-t-il si tu as un <form name="addEventListener">), vu que les développeurs web de l’époque avaient massivement adopté la pratique, les autres navigateurs ont dû s’aligner.

    Il y a eu un moment où des organismes comme le W3C ont commencé à publier des recommandations, c’est-à-dire des suggestions de standard. La première recommandation portant sur le DOM a été nommée « DOM niveau 1 », la suivante « DOM niveau 2 », etc. Les choses plus anciennes mais qui n’ont jamais été incluses dans une recommandation ont été nommées officieusement « DOM niveau 0 ». document.monformulaire, c’est du DOM niveau 0.

    Le DOM c’est des couches et des couches d’interfaces. document implémente (entre autres) l’interface Document qui a une méthode querySelector qui permet de rechercher un élément dans toute la page.

    document.body est un raccourci vers le <body>, un exact équivalent à document.querySelector('body') ou, à l’époque où querySelector n’existait pas, document.getElementsByTagName('body')[0].
    Le <body> implémente l’interface Element (que document n’implémente pas). Il se trouve qu’il y a aussi une méthode querySelector sur Element mais elle ne fait pas tout à fait la même chose : elle recherche un élément parmi les enfants de l’élément appelant, au lieu de toute la page.

    Tu verras bien la différence en comparant les commandes suivantes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.querySelector('html');
    document.body.querySelector('html');
    Je réponds à tes questions ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2017
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2017
    Messages : 3
    Points : 5
    Points
    5
    Par défaut
    Oui merci Watilin, ca répond à ma question

Discussions similaires

  1. Réponses: 30
    Dernier message: 28/03/2015, 13h21
  2. Réponses: 0
    Dernier message: 20/10/2014, 10h02
  3. Réponses: 0
    Dernier message: 20/10/2014, 10h02
  4. javascript + php + arborescence
    Par efoulefou dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/02/2013, 19h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo