Javascript et arborescence du DOM

Version imprimable

Bonjour,
Je suis en train d'apprendre le javascript mais j'ai quelques soucis parfois pour naviguer dans l'arborescence.

Code:

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:

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

20/06/2017, 22h29
Watilin
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:

1 2 document.querySelector('html'); document.body.querySelector('html');
Je réponds à tes questions ?
21/06/2017, 07h03
ce_moi

Oui merci Watilin, ca répond à ma question