Résumé des compétences courantes d'utilisation des sélecteurs JS bruts_javascript

GetElementById, getElementsByName, getElementsByTagName communs. Mais les étrangers n'étaient pas satisfaits de ces API, ils ont donc proposé getElementsByClassName. Plus tard, les sélecteurs jQuery sont apparus petit à petit. Ici, nous ne parlons que de la sélection js originale.

1.getElementById

Il s'agit du sélecteur le plus couramment utilisé, localisé par identifiant :

Exemple :

var test=document.getElementById(" test ").value;//Obtenir la valeur de l'élément avec l'identifiant test dans le document et l'attribuer pour tester le changement de visage

2.getElementsByName

Exemple :

var test= document.getElementByName("test");//Récupère le nœud de l'élément nommé test dans le document et attribue-le à la variable test A ce stade, la variable test est un tableau

3. getElementsByTagName

Exemple :

var test=document.getElementsByTagName("test");//Obtenir le nœud de l'élément avec la classe test dans le document et l'attribuer à test à ce moment. , la variable de test est un tableau, et ce sélecteur est dans Ne peut pas être utilisé dans IE5, 6, 7, 8

4.getElementsByClassName

Ce sélecteur est introuvable dans l'API js If. vous souhaitez l'utiliser, vous devez définir la méthode vous-même. Le principe habituel Tout d'abord, utilisez getElementsByTagName("*") pour récupérer tous les éléments du document, puis parcourez, utilisez des expressions régulières pour trouver les éléments correspondants, mettez-les dans un tableau et retournez-les. Il existe de nombreux programmeurs sur Internet qui ont implémenté ce sélecteur. Voici deux exemples :

(1) Le schéma Ultimate getElementsByClassName, rédigé par Robert Nyman, a été implémenté en 2005. On peut voir que beaucoup de choses par les étrangers ont été implantés il y a longtemps Très loin.

Copier le code Le code est le suivant :

//Trois paramètres sont requis, trouvez-en un Il y a 5007 éléments avec le nom de classe "cell" dans la page Web. IE8 dure 1828 ~ 1844 millisecondes,
//IE6 dure 4610 ~ 6109 millisecondes, FF3.5 dure 46 ~ 48 millisecondes, opera10 dure 31 ~ 32 millisecondes. , et Chrome dure 23 ~ 26 millisecondes,
//safari4 vaut 19 ~ 20 millisecondes
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) fourni par Dustin Diaz (auteur de "JavaScript Design Patterns"), mais la compatibilité n'est pas aussi bonne que ci-dessus et ne prend pas en charge IE5.

Copier le code Le code est le suivant :

//Les deux derniers paramètres sont fiables, trouver une page Web Il y a 5007 éléments avec le nom de classe "cell". IE8 dure 78 millisecondes, IE6 dure 125~171 millisecondes
// FF3.5 vaut 42 ~ 48 millisecondes, opera10 vaut 31 millisecondes, Chrome vaut 22 ~ 25 millisecondes, safari4 vaut 18 ~ 19 millisecondes
var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array(); document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag); new RegExp(" (^|\s)" searchClass "(\s|$)");
for (i = 0, j = 0; i < elsLen; i ) {
if ( modèle. test(els[ i].className) ) {
classElements[j] = els[i];
j
}

return classElements;
}


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

Remarque : cela peut représenter le nœud de l'élément courant.

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

Voici quelques méthodes couramment utilisées pour faire correspondre des points de connaissance tels que des événements :




Copier le code

Le code est le suivant :

//Soumettre le formulaire avec l'identifiant test

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

//Définir la bordure de l'élément avec l'identifiant test à 2 pixels, uni, rouge

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

//La souris bouge ou sort de l'élément avec id test, Changer sa couleur d'arrière-plan

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 Le nombre d'éléments portant le nom test dans le document

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