Common getElementById, getElementsByName, getElementsByTagName. But foreigners were not satisfied with these APIs, so they created getElementsByClassName, and later a jQuery selector appeared little by little, and only the original js selection is mentioned here.
1.getElementById
This is the most commonly used selector, and is positioned by id:
example:
var test=document.getElementById("test").value;//Get the value of the element with id test in the document and assign the value to the test face change
2.getElementsByName
example:
var test=document.getElementByName("test");//Get the node of the element whose name is 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 in the document with class test and assign it to test. At this time, the test variable is an array. This selector is in IE5, 6, 7, 8 not available
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 is to first use getElementsByTagName("*") to retrieve all elements in the document, then traverse it, and find it using regular expressions The matching elements are returned in an array. There are many programmers on the Internet that implement this selector, and the following are two examples:
(1) The Ultimate getElementsByClassName solution, authored by Robert Nyman, was implemented in 2005. It can be seen that many things from foreigners have gone very far a long time ago.
The code copy is as follows:
//The three parameters are all required. Find 5007 elements with class name "cell" in a web page. IE8 lasts 1828 to 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 the compatibility is not as good as the above and does not support IE5.
The code copy is as follows:
//The last two parameters are reliable. Find 5007 elements with class name "cell" in a web page. IE8 lasts 78 milliseconds, and IE6 lasts 125~171 milliseconds.
//FF3.5 is 42~48ms, opera10 is 31ms, Chrome is 22~25ms, safari4 is 18~19ms
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 commonly used methods for using knowledge points such as events:
The code copy is as follows:
//Submit a form with id test
document.getElementById("test").submit();
//Set the border with id as test element to 2 pixels, solid, red
document.getElementById("test").style.border="2px solid red";
// Move or move 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 pop-up document with name test
function test()
{
var test=document.getElementsByName("test");
alert(test.length);
}