JavaScript is a high-level, interpreted, dynamically typed, and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML documents. DOM acts as an interface between JavaScript and HTML combined with CSS. The DOM represents the document as nodes and objects i.e. the browser turns every HTML tag into a JavaScript object that we can manipulate. DOM is an object-oriented representation of the web page, that can be modified with a scripting language such as JavaScript. To manipulate objects inside the document we need to select them and then manipulate them. Selecting an element can be done in five ways:
- document.querySelector() Method: It returns the first element that matches the query.
- document.querySelectorAll() Method: It returns all the elements that match the query.
- document.getElementById() Method: It returns the one element that matches the id.
- document.getElementsByClassName() Method: It returns all the elements that match the class.
- document.getElementsByTagName() Method: It returns a list of the elements that match the tag name.
DOM allows attribute manipulation. Attributes control the HTML tag’s behavior or provide additional information about the tag. JavaScript provides several methods for manipulating an HTML element attribute. The following methods are used to manipulate the attributes:
- getAttribute() method: It returns the current value of an attribute on the element and returns null if the specified attribute does not exist on the element.
- setAttribute() method: It updates the value of an already existing attribute on the specified element else a new attribute is added with the specified name and value.
- removeAttribute() method: It is used to remove an attribute of the specified element.
Example 1: The below code demonstrates the attribute manipulation where the href attribute of <a> tag changes on button click. A function is called on button click which updates the attribute value. The function myFunction() is a JavaScript function and it makes the HTML code more interactive by making runtime modifications.
<!DOCTYPE html> <html>
<head>
<title>
How to change the href attribute
dynamically using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the href attribute value<br>
dynamically using JavaScript
</h3>
Go to Google
</a>
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<script type="text/javascript">
function myFunction() {
var link = document.querySelector("a");
link.getAttribute("href");
link.setAttribute("href",
link.textContent = "Go to GeeksforGeeks";
}
</script>
</body>
</html>
|
Output:
<!DOCTYPE html> <html>
<head>
<title>
How to change the href attribute
dynamically using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the href attribute value<br>
dynamically using JavaScript
</h3>
Go to Google
</a>
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<script type="text/javascript">
function myFunction() {
document.getElementById('myLink').href
document.getElementById("myLink")
.textContent = "Go to GeeksforGeeks";
}
</script>
</body>
</html>
|
Output: