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

Question

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

我正在尝试从HTML文档中选择title loggedin类title loggedin所有锚点（然后在浏览器中打开它们）。 这些是与类别title parragraphs。

它们是以下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的完整字符串title loggedin ）。

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

Answer 4

我知道这是一个老问题，但如果您想知道jQuery如何选择元素，您可以查看其独立选择器引擎Sizzle.js的来源，这些引擎多年来一直由很多聪明的人开发，他们花了很多钱处理性能的时间:)