Lors du développement d'une page Web, dans de nombreux cas, nous devons faire fonctionner des éléments avec le même nom de classe, c'est-à-dire des éléments avec la même classe. J'ai passé le test écrit hier et je n'ai pas répondu à une question connexe:
JavaScript obtient le nœud avec le test de classe dans la page
J'ai donc collecté des informations pertinentes et énuméré deux méthodes, je pense que c'est mieux. Les lacunes sont également nécessaires. J'espère que tout le monde les critiquera et les corrigera. Si vous avez une meilleure façon, j'espère que vous pourrez le partager.
Solution1 Solution Jeremy Keuth
L'oncle Jeremy Keuth a parlé de la méthode GetelementsByClass dans la troisième et quatrième section du livre "Javascript Dom Programming Art" (2e édition) (anglais: Dom Scripting-Web Design avec JavaScript et le modèle d'objet de document), et a parlé de la façon d'appliquer cette méthode dans les navigateurs qui ne soutiennent pas cette propriété (IE6, IE7 et IE8, let's Dissises. Les extraits sont là, et il y a des modifications à certains endroits.
Une nouvelle méthode a été ajoutée à HTML5 DOM pour nous permettre d'accéder aux éléments via le nom de classe dans l'attribut de classe, qui est: GetElmentsByClassName. Étant donné que la méthode est relativement nouvelle, certaines implémentations DOM ne l'ont pas encore, alors soyez prudent lorsque vous l'utilisez. Voyons d'abord ce que cette méthode peut nous aider, puis discutez de la façon d'utiliser cette méthode de manière fiable.
Semblable à la méthode GetElmentsByTagName, GetElementsByClassName n'accepte également qu'un seul paramètre, qui est le nom de classe:
La copie de code est la suivante:
getElementsByClassName (classe)
La valeur de retour de cette méthode est également similaire à GetElementsByTagName, les deux sont un tableau d'éléments avec le même nom de classe. La ligne de code suivante renvoie un tableau contenant tous les éléments du nom de la classe "Sale":
La copie de code est la suivante:
document.getElementsByClassName ("Sale")
Utilisez cette méthode pour trouver des éléments avec plusieurs noms de classe. Pour spécifier plusieurs noms de classe, séparez simplement les noms de classe avec des espaces dans les paramètres de chaîne. Par exemple, ajoutez la ligne de code suivante à la balise <cript>:
La copie de code est la suivante:
alert (document.getElementsByClassName ("Sale Important"). Longueur);
Code complet
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Liste d'achat </TITAL>
</ head>
<body>
<h1> quoi acheter </h1>
<p> N'oubliez pas d'acheter ce genre de choses. </p>
<ul id = "achat">
<li> Un mince de haricots </li>
<li> fromage </li>
<li> Lait </li>
</ul>
<cript>
alert (document.getElementsByClassName ("Sale Important"). Longueur);
</cript>
</docy>
</html>
Vous verrez un 1 dans la boîte d'avertissement, indiquant qu'un seul élément correspond, car un seul élément a les noms de classe "importants" et "vente". Notez que même dans l'attribut de classe d'un élément, l'ordre des noms de classe est "Vente importante" plutôt que la "vente importante" spécifiée dans le paramètre, il correspondra toujours à l'élément. Non seulement l'ordre réel des noms de classe n'a pas d'importance, mais cela n'a pas d'importance même si les éléments ont plus de noms de classe. Comme utiliser GetElmentsByTagName, vous pouvez également utiliser GetElementsByClassName et GetElementById en combinaison. Si vous souhaitez savoir combien de noms de classe contiennent des éléments de liste de tests dans un élément avec achat d'identification, vous pouvez d'abord trouver cet objet spécifique, puis appeler GetElementsByClassName:
La copie de code est la suivante:
var shopping = document.getElementById ("achat");
var Sales = shopping.getElementsByClassName ("Sale");
De cette façon, le tableau des ventes ne contient que des éléments avec la classe "Sales" située dans la liste "Achat". Exécutez la ligne de code suivante et vous verrez que le tableau des ventes contient deux éléments:
La copie de code est la suivante:
alert (Sales.Length);
Cette méthode GetElmentsByClassName est très utile, mais seuls les navigateurs plus récents (Safari 3.1, Chorme, Firefox 3 et Opera 9.5 ou plus) le soutiennent. Pour compenser cette lacune, les programmeurs de scripts DOM doivent utiliser les méthodes DOM existantes pour implémenter leur propre GetElementsByClassName, ce qui est un peu comme un cadeau de passage à l'âge adulte. Dans la plupart des cas, leur processus de mise en œuvre est à peu près similaire à ce qui suit GetElementsByClassName, qui peut être appliqué aux nouveaux navigateurs.
La copie de code est la suivante:
fonction getElementsByClassName (node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}autre{
var résultats = [];
var elems = node.getElementsByTagName ("*");
pour (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (className)! = - 1) {
Résultats [result.Length] = elems [i];
}
}
Résultats de retour;
}
}
La fonction GetElementsByClassName accepte deux paramètres. Le premier nœud représente le point de départ de la recherche dans l'arborescence DOM, et le deuxième nom de classe est le nom de classe à rechercher. Si la fonction GetElementsByClassName appropriée existe déjà sur le nœud entrant, cette nouvelle fonction renvoie directement la liste de nœuds correspondante. Si la fonction GetElementsByClassName n'existe pas, la nouvelle fonction traversera toutes les balises et recherchera des éléments avec le nom de classe correspondant.
L'inconvénient de cette méthode est qu'il ne s'applique pas à plusieurs noms de classe.
Si vous utilisez cette fonction pour simuler le fonctionnement précédent de l'obtention de la liste des courses, vous pouvez l'écrire comme ceci:
La copie de code est la suivante:
var shopping = document.getElementById ("achat");
var Sales = shopping.getElementsByClassName (shopping, "test");
console.log (ventes);
Par conséquent, pour résoudre le problème au début de l'article, le code utilisé est le suivant:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Liste d'achat </TITAL>
</ head>
<body>
<h1> quoi acheter </h1>
<p> N'oubliez pas d'acheter ce genre de choses. </p>
<ul id = "achat">
<li> Un mince de haricots </li>
<li> fromage </li>
<li> Lait </li>
</ul>
<cript>
fonction getElementsByClassName (node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}autre{
var résultats = [];
var elems = node.getElementsByTagName ("*");
pour (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (className)! = - 1) {
Résultats [result.Length] = elems [i];
}
}
Résultats de retour;
}
}
var body = document.getElementsByTagName ("Body") [0];
var Sales = getElementsByClassName (corps, "ventes");
console.log (ventes);
</cript>
</docy>
</html>
Solution2 Solution Robert Nyman
Il existe de nombreuses façons de rechercher des éléments DOM correspondants, mais peu sont vraiment efficaces. Un inconvénient de la méthode de l'oncle Jeremy Keuth est qu'il ne peut pas être utilisé pour plusieurs noms de classe. En 2008, Robert Nyman a fourni sa propre solution dans l'article The Ultimate GetElementsByClassName, Anno 2008. En 2005, l'oncle Robert avait déjà donné sa fonction GetElementsByClassname. En 2008, il a modifié du code et ajouté de nombreuses nouvelles fonctions:
1. Si le navigateur actuel prend en charge la fonction GetElementsByClassName, la fonction native est appelée;
2. Si le navigateur actuel le prend en charge, utilisez XPATH; // xiaofeiyu: un moyen puissant de localiser les documents XML construits dans le navigateur, mais le support du navigateur n'est pas unifié
3. Prend en charge la recherche de plusieurs noms de classe quel que soit l'ordre;
4. Renvoie le tableau de nœud réel, pas un nodelist natif. // xiaofeiyu: la méthode native GetElementsByClassName renvoie un objet NodeList, qui est très similaire à un tableau, avec des propriétés d'index de longueur et de nombre, mais ce n'est pas un tableau, et vous ne pouvez pas utiliser des méthodes spécifiques au tableau telles que Pop et Push. Dans le code fourni par Robert, l'objet Nodelist est converti en tableau. Méthodes où les objets Nodelist peuvent être convertis en tableaux:
La copie de code est la suivante:
myList = array.prototype.slice.call (mynodelist)
Voici la méthode de l'oncle Robert. Je ne comprends pas certaines des choses que je n'ai pas encore compris. Je vais le mettre à jour après les avoir étudiés.
La copie de code est la suivante:
/ *
Développé par Robert Nyman, http://www.robertnyman.com
Code / licence: http://code.google.com/p/getelementsbyclassname/
* /
var getElementsByClassName = function (className, tag, elm) {
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
Elm = Elm || document;
var elements = elm.getElementsByClassName (className),
nodename = (tag)? new regexp ("// b" + tag + "// b", "i"): null,
returnElements = [],
Actuel;
for (var i = 0, il = elements.length; i <il; i + = 1) {
courant = éléments [i];
if (! Nodename || nodename.test (current.nodeName)) {
returnElements.push (courant);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
Elm = Elm || document;
var classes = className.split (""),
classestOcheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceresolver = (document.DocumentElement.Namespaceuri === xhtmlNamespace)? xhtmlNamespace: null,
returnElements = [],
éléments,
nœud;
pour (var j = 0, jl = classes.length; j <jl; j + = 1) {
classestOcheck + = "[contient (concat ('', @class, ''), '" + classes [j] + "')]";
}
essayer {
elements = document.evaluate (".//" + tag + classEstoCheck, elm, namespaceresolver, 0, null);
}
catch (e) {
elements = document.evaluate (".//" + tag + classEstoCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext ())) {
returnElements.push (nœud);
}
return returnElements;
};
}
autre {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
Elm = Elm || document;
var classes = className.split (""),
classestOcheck = [],
Elements = (tag === "*" && elm.all)? Elm.all: elm.getElementsByTagname (tag),
Actuel,
returnElements = [],
correspondre;
pour (var k = 0, kl = classes.length; k <kl; k + = 1) {
classestOcheck.push (new regexp ("(^ | // s)" + classes [k] + "(// s | $)"));
}
pour (var l = 0, ll = elements.length; l <ll; l + = 1) {
courant = éléments [l];
matches = false;
pour (var m = 0, ml = classEstoCheck.length; m <ml; m + = 1) {
Match = CLASDESTOCKECK [M] .Test (Current.ClassName);
if (! Match) {
casser;
}
}
if (correspond) {
returnElements.push (courant);
}
}
return returnElements;
};
}
return getElementsByClassName (className, tag, elm);
};