Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display the title of a document with JavaScript?
In this tutorial, we will understand two approaches to display the document's title using JavaScript.
Using document.title Property
One of the most used methods in JavaScript to access an HTML document’s title is using a document.title property. In the following example, you will learn to get access to the title. After accessing the title in JavaScript, you can manipulate it and change the way it is displayed on a website.
Syntax
Here you can see how with the use onClick method, we can set the innerHTML of a paragraph within the document. The document.title is used to grab the title, and it displays the title on click of the specified button.
title.innerHTML = document.title;
Algorithm
Step 1 − Write a title in an HTML document file.
Step 2 − Create a button to get access to the title with the onClick method.
Step 3 − Make a paragraph tag where the grabbed title can be displayed.
Step 4 − Set the required variable for the different elements within the document.
Step 5 − Create a function for the button onClick.
Step 6 − Give the paragraph tag’s variable innerHTML using the document.title method.
Example 1
You can see below that how we got access to the document’s title without giving it any id or class in the HTML file. The document.title can be used to get access to the title.
<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>
Using the etElementsByTagName() Method
Generally, we have to grab the title using JavaScript functions to manipulate the way it gets shown on different platforms. In this method, you will learn how to get the title using the document.getElementsByTagName() property. The method accepts a tag name as a parameter and returns a collection of all elements with a specified tag name.
Syntax
document.getElementsByTagName("title")[idx];
Here “title” is the parameter to the method.
The method will return a collection of all elements with the tag “title”.
We need to apply indexing to the received collection to get the different elements. Here idx is the index of the title. For example, to get the first title we set the idx to 0, and in the same way to get the second title we set the idx to 1.
Algorithm
Step 1 − Write something within the title tags of the HTML document.
Step 2 − Create button tags to be able to use the onClick method.
Step 3 − Create paragraph tags and give them an id to get access in JavaScript.
Step 4 − You can give all the important elements within the document an id or class.
Step 5 − Create a different variable that can grab the required elements.
Step 6 − Make a function onClick method.
Step 7 − The variable created for the paragraph should be given innerHTML using tagName() property.
Example 2
In this example, we will select the title by tag name. You will learn how to quickly get the title from the HTML document using the document.getElementsByTagName() method. We add two titles in an HTML document. We find both titles using two buttons.
<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>
Here you can see we have added two buttons to show different titles within a document. Through this output, you can understand that adding 0 index after tagName() property can help in getting access to the first title.
Both document.title property and getElementByTagName() method is used to get access to a document’s title. You can experiment with both methods in JavaScript before choosing the preferred one. If you want to manipulate the behavior of the document’s title, then getting access to the title using JavaScript can be a good starting point.
2K+ Views
