Common methods for using the original JS selector _ javascript skills

Common original JS selectors include getElementById, getElementsByName, and getElementsByTagName. We will summarize the common getElementById, getElementsByName, and getElementsByTagName for you. However, foreigners are not satisfied with these APIs, so they developed getElementsByClassName. Later, the jQuery selector appeared a little bit. Here we only talk about the original js choice.

1. getElementById

This is the most common selector, which is located by id:

Example:

Var test = document. getElementById ("test"). value; // obtain the value of the element whose id is test in the document and assign it to test to change the face.

2. getElementsByName

Example:

Var test = document. getElementByName ("test"); // obtain the node of the element named test in the document and assign it to the test variable. In this case, the test variable is an array.

3. getElementsByTagName

Example:

Var test = document. getElementsByTagName ("test"); // obtain the node of the class test element in the document and assign it to test. The test variable is an array. The selector is in IE5, 6, 7, 8 unavailable

4. getElementsByClassName

This selector is not found in the js API and must be defined by yourself. The general principle is to use getElementsByTagName ("*") to retrieve all the elements in the document and traverse it, use a regular expression to find matching elements and put them in an array to return. Many programmers have implemented this selector on the Internet. The following are two examples:

(1) The Ultimate getElementsByClassName solution, which was developed by Robert Nyman in, shows that many foreigners have gone far before.

The Code is as follows:

// All three parameters are required. Search for the 5007 elements of a webpage class named "cell". IE8 lasts for 1828 ~ 1844 ms,
// IE6 is 4610 ~ 6109 ms, FF3.5 is 46 ~ 48 ms, opera10 is 31 ~ 32 ms, Chrome is 23 ~ 26 Ms,
// Safari4 is 19 ~ 20 ms
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 its compatibility is not as good as above and IE5 is not supported.

The Code is as follows:

// The last two parameters are reliable. Find the 5007 elements of the class "cell" on a webpage. IE8 lasts for 78 milliseconds, and IE6 lasts for 125 to milliseconds ~ 171 Ms
// FF3.5 is 42 ~ 48 ms, opera10 is 31 ms, Chrome is 22 ~ 25 ms, safari4 is 18 ~ 19 ms
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;
}

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------

Note: this indicates the node of the current element.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------

The following are some common methods of using event-related knowledge points:

The Code is as follows:

// Submit a form with the id of test

Document. getElementById ("test"). submit ();

// Set the border with id as test to 2 pixels, entity, and red

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

// Move the mouse or move the element with the id test to change 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 "};
}

// The number of elements whose name is test in the pop-up document

Function test ()
{
Var test = document. getElementsByName ("test ");
Alert (test. length );
}