Comment appeler un objet dans une page ?
http://javascript.developpez.com/faq...tion#objetPage
Beaucoup de choses à redire sur cette entrée de la FAQ qui a mal vieilli. Tout d'abord, un meilleur intitulé serait : "Comment sélectionner un élément dans une page en JavaScript ?"
Ensuite son positionnement: il me semble qu'elle aurait davantage sa place dans la section Utilisation du DOM
Enfin, ma proposition de contenu :
Citation:
Dans un script JavaScript exécuté au sein d'une page Web, l'objet
document fait référence au contenu de cette page Web. On peut grâce à cet objet venir sélectionner des éléments de la page pour en lire les propriétés ou les modifier. Prenons un exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <form action="/valider_achat" name="formulaire_achat">
<h2>Panier</h2>
<table id="panier">
<tr class="produit">
<td><img name="photo_chou" src="chou.jpg"/></td>
<td>Choux</td>
<td>
<label for="quantite_chous">
<input type="number" id="quantite_chous" value="2"/>
</td>
</tr>
<tr class="produit" name="carotte">
<td><img name="photo_carotte" src="carotte.jpg"/></td>
<td>Carottes</td>
<td>
<label for="quantite_carottes">
<input type="number" id="quantite_carottes" value="0"/>
</td>
</tr>
</table>
<input type="submit" value="Valider"></input>
</form> |
document dispose de plusieurs méthodes pour venir sélectionner un élément :
- var formulaires = document.getElementsByName("formulaire_achat");
- var lignes = document.getElementsByTagName("tr");
- var table = document.getElementById("panier");
- var produits = document.getElementsByClassName("produit");
- var quantites = document.querySelectorAll("#panier .produit input");
- var quantite_chous = document.querySelector("#panier .produit:first-child input");
getElementById et
querySelector renvoient un élément HTML unique, tandis que les autres renvoient un objet de type
NodeList qui se manipule comme un tableau sans toutefois disposer de toutes les méthodes de l'objet
Array. Par exemple, pour récupérer la valeur de la quantité du second produit, on peut écrire:
var quantite_carottes = quantites[1].value;L'attribut
name permet également de référencer les éléments de cette manière :
document.formulaire_achat.photo_chou
Pour savoir que choisir comme sélecteur entre tagName, name, id, class et autres sélecteurs plus complexes, voilà ce qu'il y a à retenir:
- L'attribut name n'est utilisable que sur certains éléments seulement : <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, et <textarea>.
- L'attribut id sert à identifier un élément de manière unique. Vous ne devez donc pas avoir plusieurs fois le même id dans un document au risque de faire face à des bogues difficilement identifiables. Utilisez-le avec modération et choisissez des valeurs d'ID précises et explicites.
- L'attribut class sert à catégoriser un ensemble d'éléments pour les sélectionner dans leur ensemble ensuite. Si vous voulez nommer un élément sans savoir à l'avance si cet élément sera parfois présent plusieurs fois sur la page, une classe est généralement un bon choix.
- querySelector et querySelectorAll sont des méthodes assez récentes permettant d'exploiter toute la richesse des sélecteurs CSS en JavaScipt, à l'instar de la fonction Sizzle de la bibliothèque jQuery. Ils permettent d'éviter de trop déclarer d'identifiants et de classes, mais en contrepartie, vous dépendrez davantage de la structure de votre HTML et devrez faire attention lorsque celle-ci est modifiée.
Avertissement:
IE 6 et inférieurs ne font pas la différence entre l'attribut name et l'attribut id. De plus, IE 9 ne distingue pas les attributs id et name en mode Quircks (pas de doctype dans le document). A cause de ces divers problèmes d'implémentations, l'usage de l'attribut
name en guise de sélecteur est généralement déconseillé.
