In JavaScript, meta tag information can be accessed using DOM methods. Meta tags commonly store information such as page descriptions, keywords, authors, and other metadata.
- Use getElementByTagName() to access all <meta> elements.
- Access individual meta tags using their index.
- Read metadata using properties such as name and content.
Approach 1: Using getElementsByTagName() Method
The getElementsByTagName("meta") method returns a collection of all <meta> elements in the document. You can loop through the collection to retrieve their information.
Syntax:
document.getElementsByTagName("meta");Example: In this example, all meta tags are retrieved and their name and content values are displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description"
content="GeeksforGeeks Article">
<meta name="keywords"
content="GeeksforGeeks, GfG, Article">
<meta name="author"
content="Aakash Pawar">
</head>
<body>
<button onclick="getMetaInfo()">
Click Here!
</button>
<div id="demo">
<h2>Content of Meta Tags</h2>
</div>
<script>
function getMetaInfo() {
const metaTags =
document.getElementsByTagName("meta");
let output = "";
for (let i = 0; i < metaTags.length; i++) {
output +=
"Name: <b>" + metaTags[i].name +
"</b>, Content: <b>" +
metaTags[i].content +
"</b><br>";
}
document.getElementById("demo").innerHTML +=
output;
}
</script>
</body>
</html>
Output: After clicking the button, the names and content values of all the meta tags are displayed on the page.
Approach 2: Using getElementsByTagName() with an Index
You can access a specific meta tag by providing its index in the collection returned by getElementsByTagName().
Syntax:
document.getElementsByTagName("meta")[index];The index starts from 0, so [0] represents the first meta tag in the document.
Example: In this example, the first meta tag is selected and its information is displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description"
content="GeeksforGeeks Article">
<meta name="keywords"
content="GeeksforGeeks, GfG, Article">
<meta name="author"
content="Aakash Pawar">
</head>
<body>
<button onclick="getMetaInfo()">
Click Here!
</button>
<div id="demo">
<h2>Content of Meta Tag</h2>
</div>
<script>
function getMetaInfo() {
const meta =
document.getElementsByTagName("meta")[0];
document.getElementById("demo").innerHTML +=
"Name: <b>" + meta.name +
"</b>, Content: <b>" +
meta.content +
"</b><br>";
}
</script>
</body>
</html>
Output: After clicking the button, the name and content of the first meta tag are displayed.
