Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display the title of a document with JavaScript?
In JavaScript, you can display a document's title using two main approaches: the document.title property and the document.getElementsByTagName() method. This tutorial demonstrates both methods with practical examples.
Using document.title Property
The document.title property is the most straightforward way to access and display an HTML document's title. It directly returns the title as a string.
Syntax
document.title
Example 1
This example shows how to display the document title by clicking a button:
<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>
When you click the "Check Title" button, it displays the document's title and hides the button.
Using getElementsByTagName() Method
The document.getElementsByTagName() method returns a collection of all elements with a specified tag name. For titles, you access them using array indexing.
Syntax
document.getElementsByTagName("title")[index]
Where index is the position of the title element (0 for first, 1 for second, etc.).
Example 2
This example demonstrates accessing multiple title elements using their index positions:
<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>
Each button displays a different title element based on its index position.
Comparison
| Method | Use Case | Returns | Complexity |
|---|---|---|---|
document.title |
Single title access | String | Simple |
getElementsByTagName() |
Multiple titles or element manipulation | HTML Element | More complex |
Key Points
-
document.titleis recommended for simple title display -
getElementsByTagName()is useful when you have multiple title elements - Both methods allow you to manipulate and display titles dynamically
- Use indexing [0], [1], etc. with
getElementsByTagName()to access specific titles
Conclusion
Both document.title and getElementsByTagName() effectively display document titles. Choose document.title for simplicity, or getElementsByTagName() when working with multiple title elements.
4K+ Views
