Common use method of original JS selector summarize _javascript skill

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, which is positioned by ID:

Cases:

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

Cases:

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

Cases:

var test=document.getelementsbytagname ("Test")//Gets the node of the element with class test in the document and assigns it to test, at which point the test variable is an array, and the selector is in ie5,6,7, Not available in 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, using regular expressions to find the matching elements into an array returned. There are a lot of programmers on the web that implement this selector, and here are two examples:

(1) The Ultimate Getelementsbyclassname program, the author of the Robert Nyman,05 year to achieve, can be seen many things foreigners in a long time ago to go very far.

Copy Code code as follows:

Three parameters are required to find a page of 5,007 classes called "cell" elements, IE8 lasted 1828 ~ 1844 milliseconds,
IE6 is 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 Getelementsbyclassname (Oelm, Strtagname, strClassName) {
var arrelements = (Strtagname = = "*" && oelm.all)? Oelm.all:
Oelm.getelementsbytagname (Strtagname);
var arrreturnelements = new Array ();
strClassName = Strclassname.replace (/\-/g, "\\-");
var oregexp = new RegExp ("(^|\\s)" + strClassName + "(\\s|$)");
var oelement;
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.

Copy Code code as follows:

The latter two parameters are reliable, looking for a page with 5,007 classes called "cell" elements, IE8 lasted 78 milliseconds, IE6 lasted 125~171 milliseconds
FF3.5 is 42 ~ 48 milliseconds, opera10 is 31 milliseconds, chrome is 22~ 25 milliseconds, Safari4 is 18 ~ 19 milliseconds
var getelementsbyclass = function (Searchclass,node,tag) {
var classelements = new Array ();
if (node = null)
node = document;
if (tag = null)
Tag = ' * ';
var 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)) {
CLASSELEMENTS[J] = els[i];
j + +;
}
}
return classelements;
}

--------------------------------------------------------------------------------------------------------------- -----------------------------------------

Note: This can represent the node of the current element.

--------------------------------------------------------------------------------------------------------------- -----------------------------------------

Here are some common uses for knowledge points such as events:

Copy Code code as follows:

//submit form with ID test

document.getElementById ("test"). Submit ();

//sets the border of the ID test element to 2 pixels, the entity, the Red

document.getElementById ("test"). style.border= "2px solid red";

//mouse moves or removes the element with the ID test, changing its background color

Function test () {
document.getElementById ("test"). onmouseover=funct Ion () {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);
}