JavaScript setattribute, GetAttribute different performance _javascript techniques on different browsers

Source: Internet
Author: User
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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.