Heim > Artikel > Web-Frontend > Wie zeige ich den Titel eines Dokuments mit JavaScript an?

Wie zeige ich den Titel eines Dokuments mit JavaScript an?

PHPznach vorne: 2023-08-24 09:49:321574Durchsuche

In diesem Tutorial werden wir zwei Ansätze zur Anzeige des Dokumenttitels verstehen JavaScript.

Verwenden der document.title-Eigenschaft

Eine der am häufigsten verwendeten Methoden in JavaScript, um auf den Titel eines HTML-Dokuments zuzugreifen, ist die Verwendung einer document.title-Eigenschaft. Im folgenden Beispiel erfahren Sie, wie Sie auf den Titel zugreifen und ihn bearbeiten können Ändern Sie die Art und Weise, wie es auf einer Website angezeigt wird.

Grammatik

Hier können Sie sehen, wie wir mit der onClick-Methode das innerHTML eines Absatzes im Dokument festlegen können. document.title wird verwendet, um den Titel abzurufen und ihn anzuzeigen, wenn auf die angegebene Schaltfläche geklickt wird.

title.innerHTML = document.title;

Algorithmus

Schritt 1 − Schreiben Sie einen Titel in eine HTML-Dokumentdatei.

Schritt 2 – Erstellen Sie eine Schaltfläche mit der onClick-Methode, um den Titel zu erhalten.

Schritt 3 − Erstellen Sie ein Absatz-Tag, um den erfassten Titel anzuzeigen.

Schritt 4 – Legen Sie die erforderlichen Variablen für verschiedene Elemente im Dokument fest.

Schritt 5 − Erstellen Sie eine Funktion für die Schaltfläche onClick.

Schritt 6 - Geben Sie die Variable innerHTML des Absatz-Tags mit der document.title-Methode an.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Sie können unten sehen, wie wir auf den Titel des Dokuments zugreifen, ohne ihm eine ID oder Klasse in der HTML-Datei anzugeben. Auf den Titel kann über document.title zugegriffen werden.

<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>

Verwendung der etElementsByTagName()-Methode

Normalerweise müssen wir JavaScript-Funktionen verwenden, damit der Titel auf verschiedenen Plattformen funktioniert. In dieser Methode erfahren Sie, wie Sie die Eigenschaft document.getElementsByTagName() verwenden, um den Titel abzurufen. Diese Methode akzeptiert einen Tag-Namen als Parameter und gibt eine Sammlung aller Elemente mit dem angegebenen Tag-Namen zurück.

Grammatik

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

Hier ist "title" der Parameter der Methode.

Diese Methode gibt eine Sammlung aller Elemente mit der Bezeichnung "title" zurück.

Wir müssen eine Indizierung auf die empfangene Sammlung anwenden, um die verschiedenen Elemente zu erhalten. Hier ist idx der Index des Titels. Um beispielsweise den ersten Titel zu erhalten, setzen wir idx auf 0 Um den zweiten Titel zu erhalten, setzen wir den idx auf 1.

Algorithmus

Schritt 1 – Schreiben Sie etwas in die Titel-Tags des HTML-Dokuments.

Schritt 2 – Erstellen Sie eine Schaltflächenbeschriftung, um die onClick-Methode verwenden zu können.

Schritt 3 – Erstellen Sie Absatz-Tags und geben Sie ihnen eine ID, um in JavaScript Zugriff zu erhalten.

Schritt 4 – Sie können allen wichtigen Elementen in Ihrem Dokument IDs oder Klassen zuweisen.

Schritt 5 – Erstellen Sie eine andere Variable, die die erforderlichen Elemente erfassen kann.

Schritt 6 – Erstellen Sie eine Funktion für die onClick-Methode.

Schritt 7 – Die für den Absatz erstellte Variable sollte mithilfe des tagName()-Attributs auf innerHTML gesetzt werden.

Beispiel 2

In diesem Beispiel wählen wir den Titel nach Tag-Namen aus. Sie erfahren, wie Sie mit der Methode document.getElementsByTagName() schnell Titel aus einem HTML-Dokument abrufen. Wir haben dem HTML-Dokument zwei Header hinzugefügt. Wir finden diese beiden Titel über zwei Schaltflächen.

<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>

Hier sehen Sie, dass wir zwei Schaltflächen hinzugefügt haben, die unterschiedliche Überschriften im Dokument anzeigen. Anhand dieser Ausgabe können Sie verstehen, dass das Hinzufügen des Index 0 nach dem Attribut tagName() dabei helfen kann, den ersten Titel zu erhalten.

Die Eigenschaft document.title und die Methode getElementByTagName() werden beide verwendet, um auf den Titel des Dokuments zuzugreifen. Sie können beide Methoden in JavaScript ausprobieren und Ihre bevorzugte Methode auswählen. Wenn Sie das Verhalten von Dokumentkopfzeilen manipulieren möchten, ist die Verwendung von JavaScript für den Zugriff auf die Kopfzeilen möglicherweise ein guter Ausgangspunkt.

Das obige ist der detaillierte Inhalt vonWie zeige ich den Titel eines Dokuments mit JavaScript an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich animierte Bilder in HTML-Seiten?Nächster Artikel：Wie verwende ich animierte Bilder in HTML-Seiten?

In Verbindung stehende Artikel

Mehr sehen