JavaScript document.title: Read and Change the Page Title
The document.title property gets or sets the title of the current page. In an HTML document, it reflects the text inside the <title> element and changing it updates the title shown by the browser tab.
const currentTitle = document.title;
document.title = "JavaScript DOM Tutorial";Use a clear default <title> in the HTML. JavaScript can then update it when the page state changes, such as when a user opens a specific view in a single-page interface.
Table of Contents
Read the Current Page Title Top ↑
Reading document.title returns a string.
const pageTitle = document.title;
console.log(pageTitle);The HTML equivalent is the <title> element in the page <head>.
Change the Title on Button Click Top ↑
The original tutorial changed the title from a textbox after a button click. The same example can be written without an inline onclick handler:
const titleInput = document.getElementById("titleInput");
const changeButton = document.getElementById("changeTitle");
changeButton.addEventListener("click", () => {
document.title = titleInput.value.trim() || "Default Page Title";
});Update the Title While the User Types Top ↑
For text input, the input event is usually more direct than older keyboard-event code because it also reacts to paste, drag-and-drop, and other input methods.
titleInput.addEventListener("input", (event) => {
const value = event.target.value.trim();
document.title = value || "Default Page Title";
});Page Titles, SEO and Accessibility Top ↑
The title should describe the page accurately and remain unique enough to distinguish the page from other pages on the site. The title is also useful to people navigating browser tabs or using assistive technology.
JavaScript title changes affect the current DOM and browser UI. They do not rewrite the PHP or HTML source file on the server. For normal content pages, keep the main descriptive title in the server-rendered HTML instead of depending on JavaScript to create it.
The older tutorial also linked to search-engine-friendly page guidance; that link is preserved for readers using the wider Plus2net SEO material.
Common Mistakes Top ↑
- Do not confuse
document.titlewith the HTMLtitleattribute used for element tooltips. - Avoid changing the title on every key press unless that behavior genuinely helps the interface.
- Keep an informative fallback title when an input is empty.
- Do not use an empty
<title>and rely on JavaScript for the initial page title.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
| NASIR | 27-11-2013 |
| HI I VANT OFFLINE IN THE SITE IF YOU SEND OFFLINE SITE TANKS FOR YOU | |