Cómo cambiar el título de la página en JavaScript

El "Título de la página"Se refiere al breve resumen de una página web que se muestra en la parte superior de una pestaña del navegador. El título del documento se especifica utilizando el etiqueta. La pestaña de la página o la barra de título del navegador muestra el título, que solo debe ser texto. Al navegar por las páginas del sitio web, el título de la página debe cambiarse de acuerdo con su contenido.

Esta publicación de blog definirá el procedimiento para cambiar el título de la página en JavaScript.

Cómo cambiar el título de la página en JavaScript?

Para cambiar el título de la página, use los métodos dados a continuación:

• documento.título propiedad
• QuerySelector () método

Veamos cómo funcionan estos métodos.

Método 1: Cambie el título de la página usando el documento.propiedad de la propiedad

El título del documento se puede cambiar o recuperar utilizando el "documento. título" atributo. El título de la página se puede cambiar proporcionando el nuevo nombre o título como cadena a este atributo.

Sintaxis
Siga la sintaxis dada para usar la propiedad "documento.título"Para cambiar el título de la página:

documento.title = "Newtitle";

Ejemplo
Cree un botón en el archivo HTML que cambiará el título de la página en el evento de clic:

Haga clic para cambiar el título de la página

Aquí, el título de la página de la página HTML creada es "Documento"Eso se cambiará haciendo clic en el botón:

En el archivo JavaScript, defina una función "Changetitle ()"Donde establezca el nuevo título de la página que se cambiará usando el"documento.título" atributo:

function changeTitle ()
documento.title = 'Linuxhint';

Producción

La salida anterior muestra que el título de la página se cambia correctamente en el botón Haga clic.

Método 2: Cambie el título de la página usando el método QuerySelector ()

Hay otra forma de cambiar el título de la página, utilizando el "QuerySelector ()"Método con el"contenido del texto" atributo. Este método toma un elemento DOM como argumento y luego cambia el título actual de la página utilizando la propiedad TextContent.

Sintaxis
Use la siguiente sintaxis para cambiar el título de la página usando el "QuerySelector ()" método:

documento.QuerySelector ('título').textContent = "Newtitle";

Ejemplo
Defina una función "Changetitle ()"Y configure el nuevo título para la página eligiendo"título"Elemento en"QuerySelector ()" método:

function changeTitle ()
documento.QuerySelector ('título').textContent = 'Linuxhint';

Producción

Se puede observar desde la salida que el título de la página se ha cambiado usando JavaScript.

Conclusión

Para cambiar el título de la página, use el "documento.título"Propiedad o el"QuerySelector ()"Método con el"contenido del texto" propiedad. Para cambiar el título de la página, el "documento.título"El atributo es el método más ampliamente utilizado. Cambia rápidamente el título de la página, mientras que el segundo método obtiene primero el elemento del título y luego cambia su valor, esta publicación de blog demuestra las formas de cambiar el título de la página en JavaScript.