Summary of common raw JS selector usage methods_javascript skills

Common getElementById, getElementsByName, getElementsByTagName. But foreigners were not satisfied with these APIs, so they came up with getElementsByClassName. Later, jQuery selectors appeared little by little. Here we only talk about original js selection.

1.getElementById

This is the most commonly used selector, located by id:

Example:

var test=document.getElementById(" test").value;//Get the value of the element with id test in the document and assign it to test face changing

2.getElementsByName

Example:

var test= document.getElementByName("test");//Get the node of the element named test in the document and assign it to the test variable. At this time, the test variable is an array

3.getElementsByTagName

Example:

var test=document.getElementsByTagName("test");//Get the node of the element with class test in the document and assign it to test. At this time, the test variable is an array, and this selector is in Cannot be used in IE5, 6, 7, 8

4.getElementsByClassName

This selector cannot be found in the js API. If you want to use it, you must define the method yourself. The usual principle First, use getElementsByTagName("*") to retrieve all elements in the document, then traverse, use regular expressions to find matching elements, put them into an array and return them. There are many programmers on the Internet who have implemented this selector. Here are two examples:

(1) The Ultimate getElementsByClassName scheme, authored by Robert Nyman, was implemented in 2005. It can be seen that many things by foreigners have been implemented a long time ago Very far away.

Copy code The code is as follows:

//All three parameters are required, find one There are 5007 elements with the class name "cell" in the web page. IE8 lasts 1828 ~ 1844 milliseconds,
//IE6 is 4610 ~ 6109 milliseconds, FF3.5 is 46 ~ 48 milliseconds, opera10 is 31 ~ 32 milliseconds, and 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 the compatibility is not as good as the above and does not support IE5.

Copy code The code is as follows:

//The last two parameters are reliable, find a web page There are 5007 elements with the class name "cell". IE8 lasts 78 milliseconds, IE6 lasts 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.

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

The following are some commonly used methods to match knowledge points such as events:

Copy codeThe code is as follows:

//Submit the form with id test

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

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

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

//The mouse moves or moves out of the element with id test, 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"};
}

//Pop up The number of elements with the name test in the document

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