Maison >interface Web >tutoriel HTML >Comment afficher le titre d'un document en utilisant JavaScript ?

Comment afficher le titre d'un document en utilisant JavaScript ?

PHPzavant: 2023-08-24 09:49:321640parcourir

Comment afficher le titre dun document en utilisant JavaScript ?

Dans ce tutoriel, nous comprendrons deux approches pour afficher le titre du document en utilisant JavaScript.

Utilisation de la propriété document.title

L'une des méthodes les plus utilisées en JavaScript pour accéder au titre d'un document HTML consiste à utiliser une propriété document.title Dans l'exemple suivant, vous apprendrez à accéder au titre en JavaScript, vous pouvez le manipuler et. changer la façon dont il est affiché sur un site Web.

Grammaire

Ici vous pouvez voir comment, en utilisant la méthode onClick, nous pouvons définir le innerHTML d'un paragraphe dans le document. document.title est utilisé pour obtenir le titre et afficher le titre lorsque vous cliquez sur le bouton spécifié.

title.innerHTML = document.title;

Algorithme

Étape 1 - Écrivez un titre dans un fichier de document HTML.

Étape 2 - Créez un bouton en utilisant la méthode onClick pour obtenir le titre.

Étape 3 - Créez une balise de paragraphe pour afficher le titre capturé.

Étape 4 - Définissez les variables requises pour les différents éléments du document.

Étape 5 - Créez une fonction pour le bouton onClick.

Étape 6 - Donnez la variable innerHTML de la balise de paragraphe en utilisant la méthode document.title.

La traduction chinoise de

Exemple 1

est :

Exemple 1

Vous pouvez voir ci-dessous comment nous accédons au titre du document sans lui donner d'identifiant ou de classe dans le fichier HTML. Le titre est accessible en utilisant document.title.

<html>
   <head>
      <title> This is the title accessed from the document </title>
   </head>
   <body>
      <h3> Please click the button to get the title of the document</h3>
      <button id="titleBtn" onClick="titleButton()">Check Title</button>
      <p id="result"></p>
      <script>
         var paraTitle = document.getElementById('result');
         function titleButton() {
            paraTitle.innerHTML = document.title;
            document.getElementById('titleBtn').style.visibility = 'hidden';
         }
      </script>
   </body>
</html>

Utilisation de la méthode etElementsByTagName()

Habituellement, nous devons utiliser des fonctions JavaScript pour que le titre fonctionne sur différentes plateformes. Dans cette méthode, vous apprendrez à utiliser la propriété document.getElementsByTagName() pour obtenir le titre. Cette méthode accepte un nom de balise comme paramètre et renvoie une collection de tous les éléments portant le nom de balise spécifié.

Grammaire

document.getElementsByTagName("title")[idx];

Ici "titre" est le paramètre de la méthode.

Cette méthode renverra une collection de tous les éléments avec le label "titre".

Nous devons appliquer l'indexation à la collection reçue pour obtenir les différents éléments. Ici idx est l'index du titre. Par exemple, pour obtenir le premier titre, nous définissons le idx à 0, et de la même manière. moyen d'obtenir le deuxième titre, nous avons défini le idx sur 1.

Algorithme

Étape 1 - Écrivez quelque chose dans les balises de titre du document HTML.

Étape 2 - Créez une étiquette de bouton pour pouvoir utiliser la méthode onClick.

Étape 3 - Créez des balises de paragraphe et donnez-leur un identifiant pour y accéder en JavaScript.

Étape 4 - Vous pouvez attribuer des identifiants ou des classes à tous les éléments importants de votre document.

Étape 5 - Créez une variable différente qui peut récupérer les éléments requis.

Étape 6 - Créez une fonction pour la méthode onClick.

Étape 7 - La variable créée pour le paragraphe doit être définie sur innerHTML à l'aide de l'attribut tagName().

Exemple 2

Dans cet exemple, nous sélectionnerons le titre par nom de balise. Vous apprendrez comment obtenir rapidement les titres d'un document HTML à l'aide de la méthode document.getElementsByTagName(). Nous avons ajouté deux en-têtes au document HTML. On retrouve ces deux titres à l'aide de deux boutons.

<html>
   <head>
      <title> This is the first title accessed using index 0. </title>
      <title> This is the second title accessed using index 1.</title>
   </head>
   <body>
      <h3>Getting the Title of the document using Tag Name. </h3>
      <button id="titleBtn" onClick="titleButton()">Check First Title</button>
      <button id="secondBtn" onClick="secondButton()">Check Second Title</button>
      <p id="paraTitle"> </p>
      <script>
         var paraTitle = document.getElementById('paraTitle');
         function titleButton() {
            var title = document.getElementsByTagName("title")[0];
            paraTitle.innerHTML = title.innerHTML;
         }
         function secondButton() {
            var title = document.getElementsByTagName("title")[1];
            paraTitle.innerHTML = title.innerHTML;
         }
      </script>
   </body>
</html>

Ici, vous pouvez voir que nous avons ajouté deux boutons qui affichent des titres différents dans le document. À partir de cette sortie, vous pouvez comprendre que l'ajout d'un index 0 après l'attribut tagName() peut aider à obtenir le premier titre.

La propriété document.title et la méthode getElementByTagName() sont toutes deux utilisées pour accéder au titre du document. Vous pouvez essayer les deux méthodes en JavaScript et choisir votre méthode préférée. Si vous souhaitez manipuler le comportement des en-têtes de documents, utiliser JavaScript pour accéder aux en-têtes peut être un bon point de départ.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser des images animées dans les pages HTML ?Article suivant：Comment utiliser des images animées dans les pages HTML ?

Articles Liés

Voir plus