revision:
The getAttributeNode() method returns the specified attribute of the specified element, as an Attr node.
The getAttributeNode() method returns an element's attribute. Itreturns an Attribute object.
The getAttribute() method returns the value of an attribute., while the getAttributeNode() method returns an Attr object, and you must use the Attr value property to get the value. The result will be the same.
getAttributeNode(attrName)
Parameters:
attrName : required; is a string containing the name of the attribute.
// html: <div id="top" />
let t = document.getElementById("top");
let idAttr = t.getAttributeNode("id");
alert(idAttr.value === "top");
target value :
<div>
<a href="https://lwitters.com" target="_blank">my website</a>
<button onclick="getFunction()">click me</button>
<p>target value : <span id="get-1"></span></p>
</div>
<script>
function getFunction(){
var a=document.getElementsByTagName("a")[0];
var x=document.getElementById("get-1");
x.innerHTML=a.getAttributeNode("target").value;
}
</script>
The value of the class attribute node of the first h4 element is:
<div>
<h4 class="democlass">The Element Object</h4>
<p>The value of the class attribute node of the first h4 element is:</p>
<p id="get-2"></p>
</div>
<script>
const element = document.getElementsByTagName("h4")[0];
const attr = element.getAttributeNode("class");
document.getElementById("get-2").innerHTML = attr.value;
</script>
Click the button to display the value of the onclick attribute node of the button element.
<div>
<p>Click the button to display the value of the onclick attribute node of the button element.</p>
<button id="myBtn" onclick="getFunction2()">Try it</button>
<p id="get-4"></p>
</div>
<script>
function getFunction2() {
var elmnt = document.getElementById("myBtn");
var attr = elmnt.getAttributeNode("onclick").value;
document.getElementById("get-4").innerHTML = attr;
}
</script>