JavaScript setattribute, GetAttribute different performance _javascript techniques on different browsers

Test environment (client browser)
IE6,IE7, IE8 compatibility mode, IE8
Firefox 3.6.8, Google Chrome 5.0.375.125

The standard definitions of two functions are described first.
Elementnode.setattribute (Name,value)
Name required. Specify the name of the property to set.
Value required. Specify the property value to set.
This method sets the specified property to the specified value. If a property with the specified name does not exist, the method creates a new property.

Elementnode.getattribute (name)
Name required. A property that prescribes the property value to be obtained from.

first, the problem of setattribute
Elementnode for <tr>...</tr>

You want to add an event handler function that clicks on the row.
Writing 1:
Table1row1.setattribute ("onclick", "Selectrow1 (This)");
IE8, Firefox, Google Chrome can trigger the Click event correctly
IE6,IE7 does not trigger the Click event.
Writing 2:
Table2row1.onclick = function () {Selectrow2 (this)};
All test browsers can trigger the Click event

So in order to be compatible with different IE, we can use the following statements uniformly.
Table2row1.onclick = function () {Selectrow2 (this)};


Ii. the problem of getattribute
Elementnode for <tr>...</tr>
Set properties with SetAttribute first
Table1row1.setattribute ("Level", 1);
Then use GetAttribute to get the property value of the label
var level = Table1row1.getattribute ("level");
Alert ("Table1row1 level:" + level + "\r\ntypeof [level] =" + (typeof (Level)). ToString ());
Display in ie6,7

Table1row1 level:1
typeof (Level) = number

Shown in IE8, Firefox, Google Chrome



Table1row1 level:1
typeof (Level) = string
In order to handle both cases uniformly, the code is unified as follows:

Copy Code code as follows:

var level = Table1row1.getattribute ("level");
if (level = = Undefined | | level = NULL) {
Level = "0";
}
Level = Level.tostring ();
if (level.trim () = = "") {
Level = "0";
}

or using AJAX methods
The $addHandler is a shortcut to Sys.UI.DomEvent.addHandler, and its syntax is:
$addHandler (element, eventName, handler);
element exposes the DOM elements of the event.
The name of the EventName event.
Handler the event handler to add.
The preceding statement can be written like this:
$addHandler (row, click, function () {SelectRow (This)});
The following is the HTML code for the test

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>Test</title>
<script type= "Text/javascript" language= "JavaScript" >
function Pageload () {
var table1row1 = document.getElementById ("Table1row1");
Table1row1.setattribute ("Level", 1);
Table1row1.setattribute ("onclick", "Selectrow1 (This)");
var table1row2 = document.getElementById ("Table1row2");
Table1row2.setattribute ("Level", 2);
Table1row2.setattribute ("onclick", "Selectrow1 (This)");
var table2row1 = document.getElementById ("Table2row1");
Table2row1.setattribute ("Level", 3);
Table2row1.onclick = function () {Selectrow2 (this)};
var table2row2 = document.getElementById ("Table2row2");
Table2row2.setattribute ("Level", 4);
Table2row2.onclick = function () {Selectrow2 (this)};
}
var CurrentSelectRow1 = null;
function Selectrow1 (newselectrow) {
if (CurrentSelectRow1!= null) {
CurrentSelectRow1.style.backgroundColor = ' #ffffff ';
}
NewSelectRow.style.backgroundColor = ' Peachpuff ';
CurrentSelectRow1 = Newselectrow;
}
var CurrentSelectRow2 = null;
function Selectrow2 (newselectrow) {
if (CurrentSelectRow2!= null) {
CurrentSelectRow2.style.backgroundColor = ' #ffffff ';
}
NewSelectRow.style.backgroundColor = ' #ff0000 ';
CurrentSelectRow2 = Newselectrow;
}
function button1_click () {
var table1row1 = document.getElementById ("Table1row1");
var level = Table1row1.getattribute ("level");
var desc1 = "Table1row1 level:" + level + "\r\ntypeof [level] =" + (typeof (Level)). ToString ();
alert (DESC1);
var onclick1 = Table1row1.getattribute ("onclick");
var desc2 = "Table1row1 onclick:" + onclick1.tostring () + "\r\ntypeof (onclick) =" + (typeof (Onclick1)). ToString ();
alert (DESC2);
}
function button2_click () {
var table2row1 = document.getElementById ("Table2row1");
var level = Table2row1.getattribute ("level");
var desc1 = "Table2row1 level:" + level + "\r\ntypeof [level] =" + (typeof (Level)). ToString ();
alert (DESC1);
var onclick1 = Table2row1.onclick;
var desc2 = "Table2row1 onclick:" + onclick1.tostring () + "\r\ntypeof (onclick) =" + (typeof (Onclick1)). ToString ();
alert (DESC2);
}
</script>
<body onload= "pageload ();" >
<div style= "width:600px" >
<span>table1</span>
<table cellspacing= "0" rules= "All" border= "1" id= "table1" style= "border-width:1px";
Border-style:solid; width:100%; Border-collapse:collapse; " >
<tr id= "Table1row0" >
&LT;TD align= "center" style= "width:50%;" >
No.
</td>
&LT;TD align= "center" style= "width:50%;" >
Item
</td>
</tr>
<tr id= "Table1row1" >
&LT;TD align= "center" style= "width:50%;" >
1
</td>
&LT;TD align= "left" style= "width:50%;" >
2c.40e80.041
</td>
</tr>
<tr id= "Table1row2" >
&LT;TD align= "center" style= "width:50%;" >
2
</td>
&LT;TD align= "left" style= "width:50%;" >
4l.013y2.003
</td>
</tr>
</table>
<input type= "button" id= "Button1" onclick= "return button1_click ();"/>
</div>
<div style= "width:600px" >
<br/>
<span>table2</span>
<table cellspacing= "0" rules= "All" border= "1" id= "table2" style= "border-width:1px";
Border-style:solid; width:100%; Border-collapse:collapse; " >
<tr id= "Table2row0" >
&LT;TD align= "center" style= "width:50%;" >
No.
</td>
&LT;TD align= "center" style= "width:50%;" >
Item
</td>
</tr>
<tr id= "Table2row1" >
&LT;TD align= "center" style= "width:50%;" >
1
</td>
&LT;TD align= "left" style= "width:50%;" >
4g.0qe18.001
</td>
</tr>
<tr id= "Table2row2" >
&LT;TD align= "center" style= "width:50%;" >
2
</td>
&LT;TD align= "left" style= "width:50%;" >
2k.61209.208
</td>
</tr>
</table>
<input type= "button" id= "Button2" onclick= "return button2_click ();"/>
</div>
</body>