Come modificare il titolo della pagina in JavaScript

IL "Titolo della pagina"Si riferisce al breve riassunto di una pagina Web visualizzata nella parte superiore di una scheda browser. Il titolo del documento è specificato utilizzando il etichetta. La scheda della pagina o la barra del titolo del browser visualizza il titolo, che dovrebbe essere solo testo. Durante la navigazione delle pagine del sito Web, il titolo della pagina dovrebbe essere modificato in base al suo contenuto.

Questo post sul blog definirà la procedura per modificare il titolo di pagina in JavaScript.

Come modificare il titolo della pagina in JavaScript?

Per modificare il titolo della pagina, utilizzare i metodi di seguito:

• documento.titolo proprietà
• QuerySelector () metodo

Vediamo come funzionano questi metodi.

Metodo 1: modificare il titolo della pagina usando il documento.Proprietà del titolo

Il titolo del documento può essere modificato o recuperato utilizzando il "documento. titolo"Attributo. Il titolo della pagina può essere modificato fornendo il nuovo nome o il titolo come stringa a questo attributo.

Sintassi
Seguire la sintassi data per l'utilizzo della proprietà "documento.titolo"Per modificare il titolo della pagina:

documento.title = "newTitle";

Esempio
Crea un pulsante nel file HTML che modificherà il titolo della pagina sull'evento:

Fare clic per modificare il titolo della pagina

Qui, il titolo della pagina della pagina HTML creata è "Documento"Verrà modificato facendo clic sul pulsante:

Nel file JavaScript, definisce una funzione, "ChangeTitle ()"Dove impostare il nuovo titolo per la pagina che verrà modificato utilizzando il"documento.titolo"Attributo:

funzione ChangeTitle ()
documento.title = 'LinuxHint';

Produzione

L'output sopra mostra che il titolo della pagina viene modificato correttamente sul clic del pulsante.

Metodo 2: Modifica il titolo della pagina usando il metodo QuerySelector ()

C'è un altro modo per cambiare il titolo della pagina, usando il "QuerySelector ()Metodo "con il"TextContent"Attributo. Questo metodo prende un elemento DOM come argomento e quindi modifica il titolo corrente della pagina usando la proprietà TextContent.

Sintassi
Utilizzare la seguente sintassi per modificare il titolo della pagina usando "QuerySelector ()" metodo:

documento.QuerySelector ('Titolo').textContent = "NewTitle";

Esempio
Definire una funzione "ChangeTitle ()"E imposta il nuovo titolo per la pagina scegliendo"titolo"Elemento in"QuerySelector ()" metodo:

funzione ChangeTitle ()
documento.QuerySelector ('Titolo').textContent = 'LinuxHint';

Produzione

Si può osservare dall'output che il titolo della pagina è stato modificato usando JavaScript.

Conclusione

Per modificare il titolo della pagina, usa il “documento.titolo"Proprietà o"QuerySelector ()Metodo "con il"TextContent" proprietà. Per modificare il titolo della pagina, il "documento.titolo"L'attributo è il metodo più ampiamente utilizzato. Modifica rapidamente il titolo della pagina, mentre il secondo metodo prende prima la presa dell'elemento del titolo e quindi cambia il suo valore Questo post sul blog dimostra i modi per modificare il titolo della pagina in JavaScript.