How to display the title of a document using 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.
grammar
Here you can see how using the onClick method we can set the innerHTML of the paragraph in the document. document.title is used to get the title and display the title when the specified button is clicked.
title.innerHTML = document.title;
algorithm
Step 1 − Write a title in an HTML document file.
Step 2 - Create a button using the onClick method to get the title.
Step 3 − Create a paragraph tag to display the captured title.
Step 4 - Set the variables required for different elements in 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.
The Chinese translation ofExample 1
is:Example 1
You can see below how we can access the title of the document without giving it any id or class in the HTML file. The title can be accessed using document.title.
<html>
<head>
<title> This is the title accessed from the document </title>
</head>
<body>
<h3 id="Please-click-the-button-to-get-the-title-of-the-document"> 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
Usually, we need to use JavaScript functions to get the title to operate on different platforms. In this method, you will learn how to use the document.getElementsByTagName() property to get the title. This method accepts a tag name as a parameter and returns a collection of all elements with the specified tag name.
grammar
document.getElementsByTagName("title")[idx];
Here "title" is the parameter to the method.
This 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 the button label 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 assign id or class to all important elements in the document.
Step 5 − Create a different variable that can grab the required elements.
Step 6 - Create a function for the onClick method.
Step 7 - The variable created for the paragraph should be set to innerHTML using the tagName() attribute.
Example 2
In this example, we will select the title by tag name. You'll learn how to quickly get titles from an HTML document using the document.getElementsByTagName() method. We added two headers to the HTML document. We find these two 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 id="Getting-the-Title-of-the-document-using-Tag-Name">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 that we have added two buttons that display different headings in the document. From this output, you can understand that adding 0 index after the tagName() attribute can help get the first title.
The document.title property and the getElementByTagName() method are both used to access the title of the document. You can try both methods in JavaScript and choose your preferred method. If you want to manipulate the behavior of document headers, using JavaScript to access the headers might be a good starting point.
The above is the detailed content of How to display the title of a document using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1665
14
1423
52
1321
25
1269
29
1249
24
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Reasons and solutions for desktop layout being locked
Feb 19, 2024 pm 06:08 PM
What happens when the desktop layout is locked? When using the computer, sometimes we may encounter the situation where the desktop layout is locked. This problem means that we cannot freely adjust the position of desktop icons or change the desktop background. So, what exactly is going on when it says that the desktop layout is locked? 1. Understand the desktop layout and locking functions. First, we need to understand the two concepts of desktop layout and desktop locking. Desktop layout refers to the arrangement of various elements on the desktop, including shortcuts, folders, widgets, etc. we can be free
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to make a remote desktop connection display the other party's taskbar
Jan 03, 2024 pm 12:49 PM
There are many users using Remote Desktop Connection. Many users will encounter some minor problems when using it, such as the other party's taskbar not being displayed. In fact, it is probably a problem with the other party's settings. Let's take a look at the solutions below. How to display the other party's taskbar during Remote Desktop Connection: 1. First, click "Settings". 2. Then open "Personalization". 3. Then select "Taskbar" on the left. 4. Turn off the Hide Taskbar option in the picture.
How to check the current directory in Linux?
Feb 23, 2024 pm 05:54 PM
In Linux systems, you can use the pwd command to display the current path. The pwd command is the abbreviation of PrintWorkingDirectory and is used to display the path of the current working directory. Enter the following command in the terminal to display the current path: pwd After executing this command, the terminal will display the full path of the current working directory, such as: /home/user/Documents. In addition, you can use some other options to enhance the functionality of the pwd command. For example, the -P option can display
How to display the wifi password QR code? It is recommended to scan the wifi password on WeChat in 3 seconds.
Feb 20, 2024 pm 01:42 PM
You don’t need to enter the WIFI password often, so it’s normal to forget it. Today I will teach you the simplest way to find the password of your own WIFI. It can be done in 3 seconds. To check the WIFI password, use WeChat to scan it. The premise of this method is: there must be a mobile phone that can connect to WIFI. Okay, let’s start the tutorial: Step 1. We enter the phone, pull down from the top of the phone, bring up the status bar, and the WIFI icon. Step 2. Long press the WIFI icon to enter the WLAN settings; long press the WIFI icon. Step 3. Click Connected. Enter the WIFI name of your home, click Share Password, and a QR code will pop up; Step 4 of sharing WIFI password, we take a screenshot and save this QR code; Step 5, long press the WeChat icon on the desktop, and click Scan
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
