javascript 遍历类名

在Javascript中，遍历元素列表的方法是实现复杂功能的必要基础。而类名是一种非常有用的方式来筛选元素。这篇文章将介绍如何使用Javascript遍历类名。

首先，我们来看看基本的遍历类名的语法。假设我们有一个HTML文档，里面包含多个元素。如果我们要获取所有类名为“example”的元素，可以使用以下语句：

var elements = document.getElementsByClassName("example");

这将返回一个HTMLCollection数组，其中包含所有与该类名匹配的元素。我们可以使用循环或其他遍历方法遍历该数组，并对其中的每个元素进行操作。例如，我们可以在所有这些元素上添加一个“selected”类名：

for (var i = 0; i< elements.length; i++) {
elements[i].classList.add("selected");
}

接下来，我们来看一些比较高级的方法，来更好地控制类名的遍历。例如，我们可能想要获取所有包含一个给定类名的元素，而不是只获得一个类名。我们可以使用以下方法：

function getElementsByClassName(className) {
var found = [];
var elements = document.getElementsByTagName("*");
for (var i = 0; i< elements.length; i++) {
var names = elements[i].className.split(" ");
for (var j = 0; j< names.length; j++) {
if (names[j] == className) {
found.push(elements[i]);
break;
}
}
}
return found;
}
var elements = getElementsByClassName("example");

这里我们定义了一个名为getElementsByClassName的函数，它与原生的getElementsByClassName方法相似，但可以对给定类名的所有元素进行迭代。我们使用getElementsByTagName("*")来获取文档中的所有元素，然后将它们的类名分解成单独的字符串，并搜索包含指定类名的字符串。在找到满足条件的元素后，我们将其添加到一个数组中，并在完成循环后返回该数组。

另一个有用的技巧是使用类似于CSS选择器的语法来选择类名。这也需要使用getElementsByTagName("*")获取文档中的所有元素，然后使用querySelectorAll方法来筛选结果。例如，我们可以选择带有类名“example”的div元素以及其后代中具有“highlight”类名的span元素：

var elements = document.querySelectorAll("div.example, div.example span.highlight");

这个语句使用逗号分隔符分割两个选择器，其中第一个选择器匹配所有具有类名“example”的div元素，第二个选择器匹配所有具有类名“highlight”的span元素，这些元素是在具有类名“example”的div元素的后代中。

最后，我们来看一些常见的技巧，用于筛选类名中的特定词或符号。假设我们有一个类名为“category-5”的元素，其中包含一个数字，我们想要使用Javascript获取该数字。我们可以使用以下代码：

var element = document.getElementById("myElement");
var className = element.className;
var categoryNum = className.match(/category-([0-9]+)/)[1];

这里我们首先获取具有id“myElement”的元素，并将其类名存储在变量中。然后，我们使用正则表达式匹配类名中包含一个数字的字符串，并将结果存储在categoryNum变量中。

通过使用这些技巧，可以更好地控制类名的遍历，并轻松地从文档中选择和操作特定的元素。

javascript 遍历 类名

javascript 遍历类名