Home > Developer > JavaScript
Sample Code:
<Body>
<Table border = "1" cellspacing = "0" cellpadding = "0" id = "apple">
<Tbody>
<Tr>
<Td id = "banana" style = "color: red"> do not eat apple </td>
</Tr>
</Tbody>
</Table>
</Body>
Try to use W3C DOM
The previously accessed objects may be:
Document. all. apple or apple
Now we should use:
Document. getElementById ("apple") is used to access the object, and an ID must be unique on the page.
Document. getElementsByTagName ("div") [0] access objects by Tag Name
The property of the originally set object may be:
Document. all. apple. width = 100 or apple. width = 100
Now we should use:
Document. getElementById ("apple"). setAttribute ("width", "100 ")
Document. getElementsByTagName ("div") [0]. setAttribute ("width", "100 ")
The properties of the access object are as follows:
Document. getElementById ("apple"). getAttribute ("width ")
Document. getElementsByTagName ("div") [0]. getAttribute ("width ")
W3C DOM restrictions in IE
Because the first IE account for 95% of the total browser, there is no competition pressure, so the boss is hard to play a different way, not fully according to WEB standards.
In IE, you cannot correctly use setAttribute to set the style, class, and Event Response attributes of an object,
Therefore, I have to access and set it according to the original logging method to achieve compatibility with various browsers, such:
Document. getElementById ("banana"). class
Document. getElementById ("banana"). style. color
Document. getElementById ("banana"). onclick
Document. getElementById ("banana"). class = "fruit"
Document. getElementById ("banana"). style. color = "blue"
Document. getElementById ("banana"). onclick = function () {alert ("I Am a banana ")}
Onload in Firefox
Function over (){
Alert ("Page loaded ")
}
Normally, the onload response function is:
Document. body. onload = over
But it cannot be executed in Firefox,
Therefore, we all adopt the following form:
Window. onload = over
About the problem that the TABLE cannot Insert a new row in IE
In IE, neither innerHTML nor appendChild can be inserted into the TABLE <tr>, but other browsers are normal. The solution is to add <tr> to the <tbody> element of the TABLE, as shown below:
Var row = document. createElement ("tr ");
Var cell = document. createElement ("td ");
Var cell_text = document. createTextNode ("bananas do not eat apples ");
Cell. appendChild (cell_text );
Row. appendChild (cell );
Document. getElementsByTagName ("tbody") [0]. appendChild (row );
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
