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.)

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.)

• javascript
• dom

• what is the type of element/tag with class title loggedin? – Sarfraz Commented May 10, 2010 at 10:54
• @sarfaz Anchor, ie, a. – Humphrey Bogart Commented May 10, 2010 at 10:58
• 1 In modern browsers: document.querySelectorAll('a.title.loggedin') – zzzzBov Commented Dec 3, 2012 at 17:13

4 Answers 4

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)

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.

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.

I know this is an old question, but if you ever wanted to know how jQuery selects elements you can view the source of their standalone selector engine Sizzle.js which over the years has been developed by a lot of smart people who have spent a great deal of time on performance :)