Question

如何选择具有特定类和特定元素类型的HTML文档中的所有元素？

我正在尝试从HTML文档中选择具有类title loggedin的所有锚点（然后在浏览器中打开它们）。这些都在班级title的范围内。

它们是以下DOM树中的叶子：

+ body
  + div class='content'
    + div id='siteTable' class='sitetable linklisting'
      + div class='thing id-t3_xxxx xxx xxx link'
        + div class='entry unvoted'
            + p class='title'
              + a class='title loggedin '

x表示可变内容。

（我希望在原始JavaScript中执行此操作，即不在jQuery中。）

Answer 1

试试这个：

var aElems = document.getElementsByTagName("a");
for (var i=0; i<aElems.length; ++i) {
    var classesArr = aElems[i].className.split(/\s+/),
        classesObj = {};
    for (var j=0; j<classesArr.length; ++j) {
        classesObj[classesArr[i]] = true;
    }
    if (classesObj.hasOwnProperty("title") && classesObj.hasOwnProperty("loggedin")) {
        // action
    }
}

一些解释：

document.getElementsByTagName返回给定类型的元素数组（在本例中为a）
对于该数组中的每个元素，提取数组类名称（请参阅aElems[i].className.split）
然后将每个类名用作索引对象的属性名称
然后查找索引以查找两个类名（请参阅aElems[i].className.split）

Answer 2

从技术上讲，这不是一个班级，而是两个班级：title和loggedin。您可以使用document.getElementsByClassName()。

var elements = document.getElementsByClassName("title loggedin");

您可以将两个类传递给该方法。

Answer 3

使用document.getElementsByTagName()获取某个标记类型的所有元素并遍历列表应该有效。对于多个类，您必须手动解析className属性（将包含完整的字符串title loggedin）。

我认为您有充分的理由在纯JavaScript中执行此操作;使用像jQuery或Prototype这样的框架会更方便。

Answer 4

我知道这是一个老问题，但如果您想了解jQuery如何选择元素，您可以查看其独立选择器引擎Sizzle.js的来源，这些引擎多年来一直由很多聪明人开发谁花了很多时间在表现上:)）

根据类和元素类型选择元素

4 个答案: