Home > Developer > JavaScript
Copy codeThe Code is 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 .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 or childNodes.
Function testBtn (){
// Var myNode = document. getElementById ("btn"); // obtain the element tag.
// Var myNodeName = myNode. nodeName; // obtain the tag name as a button.
// Var x = myNode. attributes ["onclick"]. nodeType; // atrributes is an attribute array. In this sentence, the nodeType = 2 labeled 'btn 'is found as the attribute.
// If (x = 2 ){
// Alert ("You are accessing an attribute node! ");
//}
// The following code modifies the attributes of a node ================================ ==========================================
// ================================================ ========================================================== ====================
Var myNode = document. getElementById ("btn"); // obtain the element tag.
Var x = myNode. getAttribute ("id"); // obtain the id attribute of the tag
MyNode. setAttribute ("value", "test"); // modify the id attribute of a tag.
Var y = myNode. getAttribute ("value ");
Alert ("the attribute of id is changed from" + x + "to" "+ y + """);
// Add attributes to an element ==================================== ==============================================
// ================================================ ========================================================== ====================
Var myAtrr = document. createAttribute ("class ");
MyAtrr. nodeValue = "classStyle ";
MyNode. setAttribute (myAtrr );
// The difference between getAttributeNode and getAttribute is to get the property value-getAttribute ()
// The getAttribute ("") method returns the attribute value.
// Get the property value-getAttributeNode ()
// The getAttributeNode ("") method returns the attribute node. getAttributeNode (''). value gets the node value.
// Do not conduct in-depth research here for different browser results ========================== ==================================
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 ("deleted successfully !! ");
// Else
// Alert ("failed ");
Var delNode = myNode. getAttributeNode ("class ");
If (myNode. getAttribute ("class") = null)
Alert ("deleted successfully !! ");
Else
Alert ("failed ");
}
</Script>
</Head>
<Body>
<H1> Chapter 2 dom <P id = "p1"> dom overview </p>
<P> How to Use <a href = "#" name = "link"> dom </a> </p>
<Input id = "btn" type = "button" onclick = "testBtn ()" value = "test"/>
</Body>
</Html>
Note the differences between parameter methods with and without nodes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
