JavaScript DOM Programming Art Common method

1. Load method

function Addloadevent (func) {  var oldonload = window.onload;  if (typeof window.onload! = ' function ') {    window.onload = func;  } else {    window.onload = function () {      Oldo Nload ();      Func ();}}}  

2. Move the Highlight

function Highlightrows () {  if (!document.getelementsbytagname) return false;  var rows = document.getElementsByTagName ("tr");  for (var i=0; i<rows.length; i++) {    rows[i].onmouseover = function () {      this.style.fontWeight = "bold";    }    rows[i].onmouseout = function () {      this.style.fontWeight = "normal";}}  } Addloadevent (highlightrows);

3. Table, single and even

function Stripetables () {  if (!document.getelementsbytagname) return false;  var tables = document.getelementsbytagname ("table");  for (var i=0; i<tables.length; i++) {    var odd = false;    var rows = Tables[i].getelementsbytagname ("tr");    for (var j=0; j<rows.length; J + +) {      if (odd = = True) {        addclass (rows[j], "odd");        Odd = false;      } else {        odd = true;}}}}  function AddClass (element,value) {  if (!element.classname) {    element.classname = value;  } else {    Newclassname = Element.classname;    newclassname+= "";    newclassname+= value;    Element.classname = Newclassname;  }}

4. Animations

function Moveelement (elementid,final_x,final_y,interval) {if (!document.getelementbyid) return false;  if (!document.getelementbyid (ElementID)) return false;  var elem = document.getElementById (ElementID);  if (elem.movement) {cleartimeout (elem.movement);  } if (!elem.style.left) {elem.style.left = "0px";  } if (!elem.style.top) {elem.style.top = "0px";  } var xpos = parseint (elem.style.left);  var ypos = parseint (elem.style.top);  if (xpos = = final_x && ypos = = final_y) {return true;    } if (Xpos < final_x) {var dist = Math.ceil ((final_x-xpos)/10);  xpos = xpos + dist;    } if (Xpos > final_x) {var dist = Math.ceil ((xpos-final_x)/10);  Xpos = xpos-dist;    } if (Ypos < final_y) {var dist = Math.ceil ((final_y-ypos)/10);  ypos = ypos + dist;    } if (Ypos > Final_y) {var dist = Math.ceil ((ypos-final_y)/10);  Ypos = ypos-dist;  } elem.style.left = xpos + "px";  Elem.style.top = ypos + "px"; var repeat = "MoveelemENT (' "+elementid+", "+final_x+", "+final_y+", "+interval+") "; Elem.movement = SetTimeout (repeat,interval);}  function Positionmessage () {if (!document.getelementbyid) return false;  if (!document.getelementbyid ("message")) return false;  var elem = document.getElementById ("message");  Elem.style.position = "absolute";  Elem.style.left = "50px";  Elem.style.top = "100px"; Moveelement ("message", 125,25,20);} Addloadevent (Positionmessage);

5. Before inserting

function InsertAfter (newelement,targetelement) {  var parent = Targetelement.parentnode;  if (Parent.lastchild = = targetelement) {    parent.appendchild (newelement);  } else {    Parent.insertbefore ( newelement,targetelement.nextsibling);}  }

6. Add a Style

function AddClass (element,value) {  if (!element.classname) {    element.classname = value;  } else {    Newclassname = Element.classname;    newclassname+= "";    newclassname+= value;    Element.classname = Newclassname;  }}

7. Submit

function Gethttpobject () {if (typeof XMLHttpRequest = = "undefined") XMLHttpRequest = function () {try {return New ActiveXObject ("msxml2.xmlhttp.6.0");        } catch (e) {} try {return new ActiveXObject ("msxml2.xmlhttp.3.0");}        catch (e) {} try {return new ActiveXObject ("Msxml2.xmlhttp");}  catch (e) {} return false; } return new XMLHttpRequest ();}  function displayajaxloading (Element) {while (Element.haschildnodes ()) {element.removechild (element.lastchild);  } var content = document.createelement ("img");  Content.setattribute ("src", "images/loading.gif");  Content.setattribute ("Alt", "Loading ..."); Element.appendchild (content);}  function Submitformwithajax (Whichform, thetarget) {var request = Gethttpobject ();  if (!request) {return false;}  Displayajaxloading (Thetarget);  var dataparts = [];  var element;    for (var i=0; i<whichform.elements.length; i++) {element = Whichform.elements[i]; Dataparts[i] = element.name + ' = ' + encodeURIComponent (element.value);  } var data = Dataparts.join (' & ');  Request.open (' POST ', Whichform.getattribute ("action"), true);  Request.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Request.onreadystatechange = function () {if (request.readystate = = 4) {if (Request.status = = | | request.s          Tatus = = 0) {var matches = Request.responseText.match (/<article> ([\s\s]+) <\/article>/);          if (Matches.length > 0) {thetarget.innerhtml = matches[1]; } else {thetarget.innerhtml = ' <p>oops, there is an error.          Sorry.</p> ';        }} else {thetarget.innerhtml = ' <p> ' + request.statustext + ' </p> ';  }    }  };  Request.send (data); return true;}; Submitformwithajax (This, document.getelementsbytagname (' article ') [0]);

　　

JavaScript DOM Programming Art Common method