JavaScript : l'objet Document

Inhaltsverzeichnis

Grâce à ses propriétés et méthodes l'objet JavaScript Document influe sur le contenu réel de la page; il est la page.

Comme nous l'avons vu pour l'objet Window, l'accès aux propriétés et méthodes de l'objet se fait de la manière suivante:

[window.]document.nom_propriété
[window.]document.nom_méthode ([paramètres])

Propriétés et méthodes

Propriétés de window.document 
Propriété | Description |
alinkColor | La couleur des liens |
bgColor | La couleur de fond du document |
characterSet | Le type d'encodage du document (par exemple UTF-8) |
cookie | Chaîne de caractères qui contient les cookies du domaine auquel appartient le document |
defaultCharset | Le type d'encodage par défaut |
domain | Partie domaine dans l'adresse du document |
fgColor | Couleur du texte |
fileSize | taille du document, en octet |
lastModified | Date de dernière modification du document |
location | Adresse du document (URL) |
mimeType | Type de document |
protocol | Type de protocole dans l'adresse |
referrer | Adresse de la page précédente dans l'historique de navigation |
title | Titre du document |
URL | Adresse du document |
URLEncoded | Adresse du document, dont les caractères spéciaux sont encodés |
vlinkColor | Couleur des liens visités |
Méthodes de window.document 
Méthode | Description |
createElement() | Crée et retourne un élément HTML à partir de son tag |
getElementById() | Retourne un objet du DOM à partir de son identifiant unique |
getElementsByClassName() | Retourne la liste des éléments HTML à partir de leur classe |
getElementsByName() | Retourne la liste des éléments HTML à partir de leur attibut nom |
getElementsByTagName() | Retourne la liste des éléments HTML à partir du nom de l'attribut passé en argument |
querySelector() | Retourne le premier élément HTML correspondant au sélecteur CSS |
querySelectorAll() | Retourne la liste des éléments HTML correspondant au motif CSS du sélecteur |
write() | Ecrit une chaîne de caractères dans le document |
writeln() | Ecrit une chaîne de caractères dans le document après un retour à la ligne |

Exemples JavaScript pour l'objet Document

document.write()

C'est par cette méthode que nous pouvons créer le contenu de la page, soit au chargement de celle-ci, soit ultérieurement (script différé), afin d'en modifier le contenu ou l'apparence. Le script différé permet la création du contenu dans une autre fenêtre ou dans la fenêtre courante.

Au moment où une page est chargée, le flux de sortie du navigateur est fermé. La méthode document.write() ouvre un nouveau flux, la page courante est donc automatiquement effacée, ainsi que toutes les variables qu'elle contenait. Afin de remplacer la page courante par du code HTML, il suffit d'affecter ces données à une variable qui sera appelée par la méthode.

Le premier exemple permet de modifier l'ensemble du contenu HTML du document dans une même fenêtre.

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. 	function ecrit_dans_fenetre(){
  4. 		var nouveau_contenu = "<html><head>";
  5. 		nouveau_contenu += "<title>Même fenêtre, autre contenu.</title>";
  6. 		nouveau_contenu += "</head><body>";
  7. 		nouveau_contenu += "<h1>Résultat du script&thinsp;:</h1>";
  8. 		nouveau_contenu += "<p>La fen&amp;ecirc;tre n'a pas chang&amp;eacute;. Seul le contenu du document est modifi&amp;eacute;.</p>";
  9. 		nouveau_contenu += "<p>Cliquons maintenant sur retour pour revenir au pr&amp;eacute;c&amp;eacute;dent contenu.</p>";
  10. 		nouveau_contenu += " <form><input type=\"button\" value=\"retour\" onClick=\"window.history.back();\" /></form>";
  11. 		nouveau_contenu += "</body></html>";
  12.  
  13. 		document.write(nouveau_contenu);
  14. 		document.close();
  15.   }
  16. //]]>
  17. </script>
  1. <form>
  2. 	<input type="button" value="M&ecirc;me fen&ecirc;tre, autre contenu" onClick="ecrit_dans_fenetre()" />
  3. </form>

Le deuxième exemple permet l'ouverture d'une nouvelle fenêtreavec la définition de son contenu HTML :

  1. <script type="text/javascript">
  2. //<![CDATA[
  3.   var nouvelle_fenetre;
  4.   function cree_nouvelle_fenetre(){
  5. 	nouvelle_fenetre = window.open("","","status='test', height=250, width=400");
  6.   }
  7.   function ecrit(){
  8. 	//créer la fenêtre si elle n'existe pas, ou si elle a été fermée
  9. 	if (!nouvelle_fenetre || nouvelle_fenetre.closed) {
  10. 		cree_nouvelle_fenetre();
  11. 	}
  12.  
  13.   	//faire passer cette fenêtre au premier plan
  14.   	nouvelle_fenetre.focus();
  15.  
  16.   	//définition du contenu
  17.   	var nouveau_contenu = "<html><head><title>Autre fenêtre, autre contenu</title><link rel=\"stylesheet\" href=\"mapage.html\"></head>";
  18.   	nouveau_contenu += "<body> <h1>Résultat du script:</h1><br><br><p>C'est donc pour cette nouvelle fenêtre que nous avons défini ce contenu HTML.</p></body></html>";
  19.  
  20.   	//écriture
  21.   	nouvelle_fenetre.document.write(nouveau_contenu);
  22.   	nouvelle_fenetre.document.close();
  23. }
  24. //]]>
  25. </script>

Bemerkung

Dans le code du deuxième exemple :

  • La variable nouvelle_fenetre (nouvelle fenêtre) est déclarée comme variable globale, afin que les différentes fonctions du script puissent l'utiliser.
  • Les doubles slashes (//) permettent les commentaires, comme en langage C.
  • Pour la nouvelle fenêtre, la largeur et la hauteur sont spécifiées, ainsi que la présence de la barre de statut.
  • Une structure de contrôle permet de vérifier que la fenêtre soit bien fermée avant de l'ouvrir.
  • Dans la structure de contrôle, le double pipe (||) correspond à un ou logique.
  • Le focus est donné à la nouvelle fenêtre (ce qui n'est pas indispensable dans ce cas, mais nous permet de découvrir certaines possibilités) afin de la situer au premier plan dans le cas ou le visiteur impatient aurait déjà cliqué par exemple sur la page principale.
  • Les méthodes document.write() et document.close() spécifient maintenant la fenêtre concernée (nouvelle_fenetre).

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 19/03/2002, zuletzt geändert 04/11/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/javascript-window-document

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.

Aufzeichnungen
  1. ↑ Document Object Model : entspricht « modèle d'objets de document » en français

  2. ↑ DOM : “Document Object Model” (en français, « modèle d'objets de document ») Le DOM est la structure en arbre du contenu du document.

Inhaltsverzeichnis Haut