HTML DOM getAttributeNode() method-HTML Tutorial-php.cn

HTML DOM getAttributeNode() method

WBOY

Release： 2023-08-26 13:21:10

forward

1240 people have browsed it

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)

Copy after login

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>

Copy after login

Output

This will produce the following output -

HTML DOM getAttributeNode() 方法

When the Get button is clicked -

HTML DOM getAttributeNode() 方法

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>

Copy after login

Then we created a GET button that will execute getAttrNode() when the user clicks -

<button onclick="getAttrNode()">GET</button>

Copy after login

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;
}

Copy after login

The above is the detailed content of HTML DOM getAttributeNode() method. For more information, please follow other related articles on the PHP Chinese website!