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
HTML DOM Abbreviation Object
The HTML DOM Abbreviation Object represents the <abbr> element in the Document Object Model. The <abbr> element is used to display abbreviations or acronyms, often with a title attribute that provides the full expanded text.
The Abbreviation object provides access to all the properties and methods of the <abbr> element, allowing you to manipulate abbreviations dynamically using JavaScript.
Syntax
To access an abbreviation object using JavaScript −
document.getElementById("abbreviationId")
To create a new abbreviation object −
document.createElement("abbr")
Properties
The Abbreviation object inherits all properties from the HTMLElement interface. The most commonly used property is −
- title − Gets or sets the title attribute that contains the full expansion of the abbreviation
Accessing an Abbreviation Object
You can access an abbreviation object by using getElementById() method. This allows you to retrieve and modify properties of the abbreviation element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Accessing Abbreviation Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Abbreviation Object Example</h2>
<p>Click the button to display the full form:
<abbr id="myAbbr" title="Board of Control for Cricket in India">BCCI</abbr>
</p>
<button onclick="displayTitle()">Show Full Form</button>
<p id="result"></p>
<script>
function displayTitle() {
var abbr = document.getElementById("myAbbr");
var fullForm = abbr.title;
document.getElementById("result").innerHTML = "Full form: " + fullForm;
}
</script>
</body>
</html>
The output displays the abbreviation with the option to show its full form −
Abbreviation Object Example Click the button to display the full form: BCCI [Show Full Form] After clicking: Full form: Board of Control for Cricket in India
Creating an Abbreviation Object
You can create a new abbreviation element using the createElement() method and then add it to the document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Creating Abbreviation Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Abbreviation Creation</h2>
<div id="container"></div>
<button onclick="createAbbr()">Create Abbreviation</button>
<script>
function createAbbr() {
var abbr = document.createElement("abbr");
abbr.innerHTML = "HTML";
abbr.title = "HyperText Markup Language";
abbr.style.textDecoration = "underline dotted";
abbr.style.cursor = "help";
var container = document.getElementById("container");
container.innerHTML = "Programming Language: ";
container.appendChild(abbr);
}
</script>
</body>
</html>
This creates a new abbreviation element dynamically and adds it to the page −
Dynamic Abbreviation Creation [Create Abbreviation] After clicking: Programming Language: HTML (underlined, shows tooltip on hover)
Modifying Abbreviation Properties
You can modify the properties of an existing abbreviation object, such as changing the title or the displayed text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Modifying Abbreviation Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modifying Abbreviation Properties</h2>
<p>Technology: <abbr id="tech" title="Cascading Style Sheets">CSS</abbr></p>
<button onclick="changeToJS()">Change to JavaScript</button>
<button onclick="changeToHTML()">Change to HTML</button>
<button onclick="showCurrentTitle()">Show Current Title</button>
<p id="output"></p>
<script>
function changeToJS() {
var abbr = document.getElementById("tech");
abbr.innerHTML = "JS";
abbr.title = "JavaScript";
document.getElementById("output").innerHTML = "Changed to JavaScript";
}
function changeToHTML() {
var abbr = document.getElementById("tech");
abbr.innerHTML = "HTML";
abbr.title = "HyperText Markup Language";
document.getElementById("output").innerHTML = "Changed to HTML";
}
function showCurrentTitle() {
var abbr = document.getElementById("tech");
document.getElementById("output").innerHTML = "Current title: " + abbr.title;
}
</script>
</body>
</html>
This example demonstrates how to dynamically change both the display text and title of an abbreviation −
Modifying Abbreviation Properties Technology: CSS [Change to JavaScript] [Change to HTML] [Show Current Title] (Buttons allow switching between different abbreviations and showing their full forms)
Common Methods
The Abbreviation object supports all standard DOM element methods −
| Method | Description |
|---|---|
getAttribute() |
Returns the value of a specified attribute |
setAttribute() |
Sets the value of a specified attribute |
removeAttribute() |
Removes a specified attribute |
appendChild() |
Adds a child element |
addEventListener() |
Attaches an event listener |
Browser Support
The HTML DOM Abbreviation Object is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 6+. The <abbr> element has been part of the HTML specification since HTML 4.0.
Conclusion
The HTML DOM Abbreviation Object provides full access to <abbr> elements through JavaScript. You can access existing abbreviations using getElementById(), create new ones with createElement(), and modify their properties like title and content dynamically. This makes it easy to build interactive abbreviation tooltips and manage abbreviations programmatically on web pages.
372 Views
