Summary of common usage methods of original JS Selector

  Common Original JS selector has getelementbyid,getelementsbyname,getelementsbytagname, on use for everyone to summarize

Common Getelementbyid,getelementsbyname,getelementsbytagname. But foreigners are not satisfied with these APIs, and then made a getelementsbyclassname, and then a little bit of jquery selector, here only said the original JS selection.     1.getelementbyid    This is the most commonly used selector, by ID to locate:    Example:    var test= document.getElementById ("Test"). value;//gets the value of the element with the ID test in the document and assigns it to test face     2.getelementsbyname    Example:    var test=document.getelementbyname ("Test")//Gets the node of the element named Test in the document and assigns it to the test variable, at which point the test variable is an array     3.getelementsbytagname    Example:    var test=document.getelementsbytagname ("Test"); Gets the node of the element whose class is test in the document and assigns it to test, at which point the test variable is an array that cannot be used in ie5,6,7,8     4.getelementsbyclassname    This selector is not found in the JS API, you want to use the method you must define, the usual principle is to use getElementsByTagName ("*") to remove all the elements of the document, and then Traverse, Use regular expressions to find matching elements and return them in an array. There are a lot of programmers online to implement this selector, and here are two examples of:    (1) The Ultimate Getelementsbyclassname program, the author for Robert Nyman,05 Year, It can be seen that a lot of foreigners have gone very far long ago.     Code as follows://Three parameters are required to find a page of 5,007 classes called "cell" element, IE8 lasted 1828 ~ 1844 milliseconds, //ie6 4610 ~ 6109 milliseconds, FF3.5 is 46 ~ 48 milliseconds, OPERA10 is 31 ~ 32 milliseconds, Chrome is 23~ 26 milliseconds, //safari4 is 19 ~ 20 milliseconds   function getelementsbyclassn Ame (Oelm, Strtagname, strClassName) {  var arrelements = (Strtagname = "*" && oelm.all)? Oelm.all:  OEl M.getelementsbytagname (strtagname);  var arrreturnelements = new Array ();  strClassName = Strclassname.replace (/-/g, "-");  var oregexp = new RegExp ("(^|s)" + strClassName + (s|$));  var Oelement;&nbs P for (Var i=0 i < arrelements.length i++) {  oelement = arrelements[i];  if (oregexp.test (oelement.classname )) {  Arrreturnelements.push (oelement); } }  return (arrreturnelements)  }    (2) provided by Dustin Diaz (author of JavaScript design Patterns), but not compatible with the above, do not support IE5.     Code as follows://The latter two parameters are reliable, looking for a page of 5,007 classes named "cell" element, IE8 lasted 78 milliseconds, IE6 lasted 125~171 milliseconds  //ff3.5 42 ~ 48 milliseconds, opera10 to 31 milliseconds , Chrome is 22~ 25 milliseconds, Safari4 is 18 ~ 19 ms   var getelementsbyclass = function (Searchclass,node,tag) {  var classElements = new Array ();  if (node = null)   node = document;  if (tag = null)   tag = ' * ';  V Ar els = node.getelementsbytagname (tag);  var Elslen = els.length;  var pattern = new RegExp ("(^|s)" +searchclass + "(s|$)");  for (i = 0, j = 0; i < Elslen i++) {  if (Pattern.test (els[i].classname)) {  S[J] = els[i];  j++; } }  return classelements; }   ----------------------------- --------------------------------------------------------------------------------------------------------------- ------------    Note: This can represent the node of the current element.    -------------------------------------------------------------------------------------------------- ------------------------------------------------------    Below are some common uses for knowledge points such as events:    code is as follows:// Submit a form     document.getElementById ("test") with ID test. Submit ();   //Set the border of the ID test element to 2 pixels, solid, red     Document.geteLementbyid ("Test"). style.border= "2px solid Red";   //mouse moves or moves out of the element with ID test, changing its background color     function test () {  document.getElementById ("test"). Onmouseover=function () {document.getElementById ("test2"). Style.backgroundcolor= "Red"};  document.getElementById ("test"). Onmouseout=function () { document.getElementById ("Test2"). Style.backgroundcolor= "Blue"}; }   //popup number of elements with name test in the document   　　  function test ()   {  var test=document.getelementsbyname ("test");  alert (test.length);  }