Common GetElementByid, GetElementsByName, GetElementsByTagName. Pero los extranjeros no estaban satisfechos con estas API, por lo que crearon GetElementsByClassName, y luego un selector de jQuery parecía poco a poco, y solo la selección original de JS se menciona aquí.
1.getElementByid
Este es el selector más utilizado y está posicionado por ID:
ejemplo:
var test = document.getElementById ("prueba"). valor; // Obtenga el valor del elemento con la prueba de ID en el documento y asigne el valor al cambio de cara de prueba
2.getElementsByName
ejemplo:
Var test = document.getElementByName ("Test"); // Obtener el nodo del elemento cuyo nombre es prueba en el documento y asignarlo a la variable de prueba.
3.getElementsByTagName
ejemplo:
Var test = document.getElementsByTagName ("Test"); // Obtener el nodo del elemento en el documento con la prueba de clase y asignarlo a la prueba. , 7, 8 no disponible
4.getElementsByClassName
Este selector no se puede encontrar en la API JS. Encuéntralo utilizando expresiones regulares Los elementos coincidentes se devuelven en una matriz. Hay muchos programadores en Internet que implementan este selector, y los siguientes son dos ejemplos:
(1) La solución Ultimate GetElementsByClassName, escrita por Robert Nyman, se implementó en 2005. Se puede ver que muchas cosas de extranjeros han ido muy lejos hace mucho tiempo.
La copia del código es la siguiente:
// Los tres parámetros son necesarios.
// IE6 es 4610 ~ 6109 milisegundos, ff3.5 es 46 ~ 48 milisegundos, Opera10 es 31 ~ 32 milisegundos, Chrome es 23 ~ 26 milisegundos,
// Safari4 es 19 ~ 20 milisegundos
función getElementsByClassName (OELM, STRTAGNAME, STRCLASSNAME) {
Var Arrelements = (strtagname == "*" && oelm.all)?
oelm.getElementsBytagName (strtagname);
var arrreturnelements = new Array ();
strclassname = strclassname.replace (//-/g, "//-");
var oregexp = new Regexp ("(^| // s)" + strclassname + "(// s | $)");
varía var;
para (var i = 0; i <arrelements.length; i ++) {
oElement = Arrelements [i];
if (oregexp.test (oelement.classname)) {
arrreturnelements.push (oelement);
}
}
return (arrreturnelements)
}
(2) proporcionado por Dustin Díaz (autor de "JavaScript Design Patterns", pero la compatibilidad no es tan buena como la anterior y no admite IE5.
La copia del código es la siguiente:
// Los dos últimos parámetros son confiables.
//Ff3.5 es 42 ~ 48 ms, Opera10 es 31 ms, Chrome es 22 ~ 25 ms, Safari4 es 18 ~ 19ms
var getElementsByClass = function (SearchClass, Node, Tag) {
var classelements = new Array ();
if (nodo == null)
nodo = documento;
if (tag == null)
etiqueta = '*';
var els = node.getElementsBytagName (etiqueta);
var elslen = els.length;
Var Pattern = new Regexp ("(^| // s)"+SearchClass+"(// s | $)");
para (i = 0, j = 0; i <elslen; i ++) {
if (patrón.test (els [i] .classname)) {
Classelements [j] = els [i];
j ++;
}
}
devolver Classelements;
}
-------------------------------------------------- -------------------------------------------------- ---------------------------- ---------------------- -------------------------------------------------- -------------------------------------------------- ------ -------------------------------------------- -------------------------------------------------- -----------------------------------
Nota: Esto puede representar el nodo del elemento actual.
-------------------------------------------------- -------------------------------------------------- ---------------------------- ---------------------- -------------------------------------------------- -------------------------------------------------- ------ -------------------------------------------- -------------------------------------------------- -----------------------------------
Estos son algunos métodos de uso común para usar puntos de conocimiento como eventos:
La copia del código es la siguiente:
// Enviar un formulario con prueba de identificación
document.getElementById ("Test"). Subt ();
// Establecer el borde con ID como elemento de prueba en 2 píxeles, sólido, rojo
document.getElementById ("test"). style.border = "2px sólido rojo";
// mover o mover el elemento con la prueba de ID para cambiar su color de fondo
función test () {
document.getElementById ("test"). onMouseOver = function () {document.getElementById ("test2"). style.backgroundcolor = "rojo"};
document.getElementById ("test"). onMouseOut = function () {document.getElementById ("test2"). style.backgroundcolor = "azul"};
}
// El número de elementos en el documento emergente con la prueba de nombre
Test de funciones ()
{
var test = document.getElementsByName ("test");
alerta (test.length);
}