Common getElementById, getElementsByName, and getElementsByTagName. However, foreigners are not satisfied with these APIs, so they developed getElementsByClassName. Later, a jQuery selector emerged. Here we only talk about the original js selector.
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 SolutionThe author is Robert Nyman, which has been realized in. It can be seen that many foreigners have gone far before.
// 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 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:
// 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 );
}