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

Question

How can I select all elements within an HTML document with a specific class and specific element type?

I'm trying to select all anchors with the class title loggedin from an HTML document (and then open them within the browser). These are within parragraphs with the class title .

They are leafs in the following DOM tree:

+ 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 '

Where x indicates variable content.

(I'm looking to do this in raw JavaScript, ie, not in jQuery.)

Answer 1

Try this:

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
    }
}

Some explanation:

• document.getElementsByTagName returns an array of elements of the given type (in this case a )
• for every element in that array the array class names is extracted (see aElems[i].className.split )
• every class name is then used as property name for an index object
• the index is then looked up for the two class names (see aElems[i].className.split )

Answer 2

Technically that's not one class, it's two classes: title and loggedin . You can use document.getElementsByClassName() for that.

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

You can pass two classes to that method.

Answer 3

Fetching all elements of a certain tag type using document.getElementsByTagName() and walking through the list should work. With multiple classes you'd have to parse the className property (which will contain the full string title loggedin ) manually.

I assume you have good reason to do this in pure JavaScript; it would be much more convenient using a framework like jQuery or Prototype.

Answer 4

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