Complete Guide to Getting HTML Page Title with JavaScript

Basic Methods for Getting Page Title with JavaScript

In web development, retrieving HTML page titles is a common and important task. JavaScript provides a concise and powerful way to accomplish this, primarily through the document.title property.

Core Characteristics of document.title Property

The document.title property is a standard property of the Document interface, used to get or set the current document's title. This property returns a string value representing the document's title content.

When a page loads, document.title defaults to the content defined in the <title> element. For example, if the HTML document contains:

<title>Page Title Example</title>

Then executing through JavaScript:

console.log(document.title);

Will output in the console: Page Title Example.

Read-Write Operations of the Property

The document.title property supports both read and write operations, meaning you can not only get the title but also dynamically modify it. When setting a new title value, three places are updated simultaneously:

• The return value of the property
• The display in the browser window or tab title bar
• The content of the <title> element in the DOM

Example code demonstrates the complete read-write process:

// Get current title
var currentTitle = document.title;
console.log('Current title:', currentTitle);

// Set new title
document.title = 'New Page Title';

// Verify title has been updated
console.log('Updated title:', document.title);

Practical Application Scenarios

In actual development, document.title finds extensive applications:

Dynamic Title Updates

In single-page applications (SPA) or scenarios requiring dynamic page title updates based on user actions:

// Update title based on user action
function updatePageTitle(newTitle) {
    document.title = newTitle;
}

// Example: Update title after form submission
document.getElementById('submitBtn').addEventListener('click', function() {
    document.title = 'Form Submitted - ' + document.title;
});

Title Status Indicators

In scenarios requiring notification displays or status changes:

// Display unread message count
function showUnreadCount(count) {
    if (count > 0) {
        document.title = '(' + count + ') ' + document.originalTitle;
    } else {
        document.title = document.originalTitle;
    }
}

// Save original title
document.originalTitle = document.title;

Browser Compatibility and Standard Specifications

The document.title property has excellent browser compatibility and has been widely supported across all major browsers since July 2015. This property follows HTML standard specifications, ensuring cross-browser consistency.

According to HTML specifications, the behavior of document.title is defined as follows:

• When getting the value, returns the current document's title
• When setting the value, updates the document title and reflects it in the user interface
• Modifications to the <title> element are synchronized with the property value

Best Practices and Considerations

When using document.title, it's recommended to follow these best practices:

• Save the original title before modification for subsequent restoration
• Avoid frequent title updates to prevent affecting user experience
• Ensure title content is concise and clear, meeting SEO optimization requirements
• Properly manage title states across different pages in single-page applications

By mastering the usage of the document.title property, developers can more flexibly control page titles, enhancing user experience and application interactivity.