Home > Article > Web Front-end > HTML DOM getAttributeNode() method
HTML DOM getAttributeNode() method
- WBOYforward
- 2023-08-26 13:21:101229browse
HTML DOM getAttributeNode() is used to return the given element attribute node as an Attr object. You can manipulate attributes using various Attr object properties and methods.
Syntax
The following is the syntax of the getAttributeNode() method -
element.getAttributeNode(attributename)
Here, attributename is a mandatory parameter of string type, which specifies the attribute name we want to return.
Example
Let us see an example method of getAttributeNode() -
<!DOCTYPE html>
<html>
<head>
<script>
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}
</script>
</head>
<body>
<h1>getAttributeNode() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttrNode()">GET</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output -
When the Get button is clicked -
In the above example -
we first create an anchor Element with its href attribute value set to "https://www.google.com".
<a href="https://www.google.com">GOOGLE</a>
Then we created a GET button that will execute getAttrNode() when the user clicks -
<button onclick="getAttrNode()">GET</button>
getAttrNode() method uses getElementByTagName() method to get the item in the HTML document An anchor element. It then uses the getAttributeNode("href") method with parameter value "href".
The getAttributeNode() method returns an attr object representing the href attribute and assigns it to the variable a. We then assign the href attribute value to the variable val using the "value" attribute of the attr object. The obtained href attribute value is displayed in the paragraph with id "Sample" using its innerHTML attribute -
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}The above is the detailed content of HTML DOM getAttributeNode() method. For more information, please follow other related articles on the PHP Chinese website!