Copy the code code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>20120430dom operation attribute node.htm</title>
<meta http-equiv="Content-Type" content="text/html; chareset=utf-8"/>
<script type="text/javascript">
//Although Attr (attribute) is a node, it cannot be accessed using firstChild and childNodes.
function testBtn() {
// var myNode = document.getElementById("btn");//Get element tag
// var myNodeName = myNode.nodeName; // Get the name of the above label as the button
// var x = myNode.attributes["onclick"].nodeType; //atrributes is an attribute array. The meaning of this sentence is to find the nodeType=2 with the label 'btn' as the attribute.
// if (x == 2) {
// alert("You are accessing an attribute node!");
// }
//The following is the code to modify the attributes of a node======================================== =========================
//================================================ ============================================
var myNode = document.getElementById("btn");//Get element tag
var x = myNode.getAttribute("id");//Get the id attribute of the label
myNode.setAttribute("value", "test");//Modify the id attribute of the label
var y = myNode.getAttribute("value");
alert("The attribute of id has changed from "" + x + "" to "" + y + """);
//The following is to add attributes to an element========================================== ============================
//================================================ ============================================
var myAtrr = document.createAttribute("class");
myAtrr.nodeValue = "classStyle";
myNode.setAttribute(myAtrr);
//The difference between getAttributeNode and getAttribute is to obtain the attribute value - getAttribute()
//getAttribute("") method returns the value of the attribute.
//Get attribute value - getAttributeNode()
//getAttributeNode("") method returns the attribute node, getAttributeNode('').value gets the node value.
//The results of different browsers are different. I will not do in-depth research here.==================================== ==============
if (myNode.getAttributeNode("class") != null)
alert("Added successfully!!");
else
alert("Not added successfully");
//The following is the value of the removed attribute========================================== =================================
//================================================ ===========================================
// myNode.removeAttribute("class");
// if (myNode.getAttribute("class") == null)
// alert("Delete successfully!!");
//else
// alert("No success");
var delNode=myNode.getAttributeNode("class");
if (myNode.getAttribute("class") == null)
alert("Deletion successful!!");
else
alert("No success");
}
</script>
</head>
<body>
<h1>Chapter 2 About dom</h1>
<p id="p1">dom introduction</p>
<p>How to use <a href="#" name="link">dom</a></p>
<input id="btn" type="button" onclick="testBtn()" value="Test"/>
</body>
</html>
Pay attention to the difference between parameter methods with Node and without Node.