Common GetElementById, GetElementsByName, GetElementsByTagName. Mais les étrangers n'étaient pas satisfaits de ces API, ils ont donc créé GetElementsByClassname, et plus tard, un sélecteur jQuery est apparu petit à petit, et seule la sélection JS originale est mentionnée ici.
1.GetElementByid
Il s'agit du sélecteur le plus utilisé et est positionné par ID:
exemple:
var test = document.getElementById ("test").
2.Petelles en nom
exemple:
var test = document.getElementyName ("test"); // Obtenez le nœud de l'élément dont le nom est le test dans le document et l'attribue à la variable de test.
3.PetementsByTagName
exemple:
var test = document.getElementsByTagName ("test"); // Obtenez le nœud de l'élément dans le document avec le test de classe et attribuez-le au test. , 7, 8 Non disponible
4.GetElementsByClassName
Ce sélecteur ne peut pas être trouvé dans l'API JS. Trouvez-le en utilisant des expressions régulières Les éléments correspondants sont retournés dans un tableau. Il existe de nombreux programmeurs sur Internet qui implémentent ce sélecteur, et les éléments suivants sont deux exemples:
(1) La solution ultime de GetElementsByClassName, rédigée par Robert Nyman, a été mise en œuvre en 2005. On peut voir que beaucoup de choses d'étrangers sont allées très loin il y a longtemps.
La copie de code est la suivante:
// Les trois paramètres sont tous requis.
// ie6 est 4610 ~ 6109 millisecondes, FF3.5 est de 46 ~ 48 millisecondes, l'opéra10 est de 31 ~ 32 millisecondes, le chrome est de 23 ~ 26 millisecondes,
// Safari4 est de 19 à 20 millisecondes
function getElementsByClassName (Oelm, strtagname, strClassName) {
var arrelements = (strtagname == "*" && oelm.all)?
OELM.GETELlementsByTagName (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 = arrements [i];
if (oregexp.test (oelement.classname)) {
ArrreTurnElements.push (Oelement);
}
}
Retour (arreTUrtendements)
}
(2) Fourni par Dustin Diaz (auteur de "JavaScript Design Patterns", mais la compatibilité n'est pas aussi bonne que celle ci-dessus et ne prend pas en charge IE5.
La copie de code est la suivante:
// Les deux derniers paramètres sont fiables.
//Ff3.5 est de 42 à 48 ms, l'opéra10 est de 31 ms, le chrome est de 22 ~ 25 ms, Safari4 est de 18 à 19 ms
var getElementsByClass = function (searchClass, noeud, 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 | $)");
pour (i = 0, j = 0; i <elslen; i ++) {
if (pattern.test (els [i] .classname)) {
classElements [j] = els [i];
j ++;
}
}
retourner classElments;
}
-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------ -------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------ -------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------ -
Remarque: Cela peut représenter le nœud de l'élément actuel.
-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------ -------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------ -------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------ -
Voici quelques méthodes couramment utilisées pour utiliser des points de connaissance tels que les événements:
La copie de code est la suivante:
// Soumettre un formulaire avec test d'identification
document.getElementById ("test"). soumis ();
// Réglez la bordure avec ID comme élément de test sur 2 pixels, solide, rouge
document.getElementById ("test"). style.border = "2px solide rouge";
// Déplacez ou déplacez l'élément avec le test d'identification pour changer sa couleur d'arrière-plan
fonction test () {
document.getElementById ("test"). onMouseOver = function () {document.getElementById ("test2"). style.backgroundColor = "Red"};
document.getElementById ("test"). OnMouseout = function () {document.getElementById ("test2"). style.backgroundColor = "Blue"};
}
// le nombre d'éléments dans le document contextuel avec test de nom
Test de fonction ()
{
var test = document.getElementsByName ("test");
alert (test.length);
}