Common use methods of primitive JS selectors are summarized

Common getElementById, getElementsByName, getElementsByTagName. But the foreigners weren't happy with the apis, so they came up with getElementsByClassName, and then a little bit later came the jQuery selector, which is just the original js selection.

1. The getElementById

This is the most commonly used selector to locate by id:

Ex. :

Var test = document. GetElementById (" test "). The value; // gets the value of the element in the document whose id is test and assigns it to test to change face

2. The getElementsByName

Ex. :

Var test = document. GetElementByName (" test "); // gets the node of the element named test in the document and assigns the value to the test variable, which is an array

3. The getElementsByTagName

Ex. :

Var test = document. GetElementsByTagName (" test "); // gets the node of the element in the document whose class is test and assigns it to test. At this time, the test variable is an array. This selector is not available in IE5, 6,7,8

4. GetElementsByClassName

This selector is not found in the js API, and you must define your own methods to use it. The usual principle is to use getElementsByTagName("*") to fetch all the elements in the document, then iterate through them, and use regular expressions to find the matching elements and return them to an array. There are many programmers on the Internet who implement this selector. Here are two examples:

(1) The Ultimate getElementsByClassName scheme, by Robert Nyman, 2005 implementation, it can be seen that many things in foreign countries in a long time ago to go far.

 
//All three parameters are required to find a web page in the 5007 class called "cell" element, IE8 took 1828 to 1844 milliseconds,
//IE6 is 4610 ~ 6109 milliseconds, FF3.5 46 ~ 48 milliseconds, opera10 31 ~ 32 milliseconds, Chrome 23~ 26 milliseconds,
//Safari4 takes 19 to 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 as compatible as above, IE5 is not supported.

 
//The last two parameters are reliable, find a page in the 5007 class called "cell" element, IE8 lasted 78 milliseconds, IE6 lasted 125~171 milliseconds
//FF3.5 is 42 to 48 milliseconds, opera10 31 milliseconds, Chrome 22 to 25 milliseconds, safari4 18 to 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.

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

The following are some common methods of using the knowledge points such as events:

 
//Submit the form with id test

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

//Set the border of the element with id of test to 2 pixels, entity, red

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

//Move the mouse over or out of the element with 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 in the popup document whose name is test

function test() 
　　{ 
　　var test=document.getElementsByName("test"); 
　　alert(test.length); 
　　}