I need to understand how this works so I can code the right stuff.

<div class="element">
  <div class="content">
    <contents>
    <div class="element">
      <contents>
      <div class="thisClass"></div>
    </div>
  </div>
  <div class="thisClass"></div>
</div>

I have the element that includes a child element with similar structure and classes. If I do

var element = document.querySelector('.element'); // this returns the parent
element.querySelector('.thisClass') // ok I got it so far

EDIT: I want to make sure to always get the element ('.thisClass') from the parent, no matter what is the order of the parent's child elements, and using the best possible script.

I am very tired working like a workaholic, I'm a newbie with native JS, I hope this is clear enough.

I need to understand how this works so I can code the right stuff.

<div class="element">
  <div class="content">
    <contents>
    <div class="element">
      <contents>
      <div class="thisClass"></div>
    </div>
  </div>
  <div class="thisClass"></div>
</div>

I have the element that includes a child element with similar structure and classes. If I do

var element = document.querySelector('.element'); // this returns the parent
element.querySelector('.thisClass') // ok I got it so far

EDIT: I want to make sure to always get the element ('.thisClass') from the parent, no matter what is the order of the parent's child elements, and using the best possible script.

I am very tired working like a workaholic, I'm a newbie with native JS, I hope this is clear enough.

• javascript
• dom
• css-selectors
• selectors-api

Share Improve this question Follow edited Apr 8, 2015 at 19:29 thednp asked Apr 8, 2015 at 18:18 thednpthednp 4,47944 gold badges3535 silver badges5151 bronze badges 7

• 5 Try it and use console.log to show which – mplungjan Commented Apr 8, 2015 at 18:20
• 3 MDN - querySelector() - "Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors." – Josh Crozier Commented Apr 8, 2015 at 18:21
• If you need to just mess around with simple code like this, you should check out jsfiddle – ShadowCat7 Commented Apr 8, 2015 at 18:24
• document.querySelector('.element') === document.querySelectorAll('.element')[0] === document.getElementsByClassName('element')[0] – pawel Commented Apr 8, 2015 at 18:24
• @ShadowCat7 Not even necessary. SO has code editor too – mplungjan Commented Apr 8, 2015 at 18:26

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 9

var element = document.querySelector('.element'); // this returns the parent
element.querySelector('.thisClass')

what would this return and why?

It would return this element:

<div class="element">
  <div class="content">
    <contents>
    <div class="element">
      <contents>
      <div class="thisClass"></div><!-- <===== Here -->
    </div>
  </div>
  <div class="thisClass"></div>
</div>

The "why" is because querySelector and methods like it work in document order, which is the order of the document from top to bottom (e.g., as though written out as HTML). Or to put it another way, it's a depth-first search of the element.

---

Re your edit:

I want to make sure to always get the element ('.thisClass') from the parent, no matter what is the order of the parent's child elements, and using the best possible script.

That pletely changes the question. And the answer is: You can't use querySelector for that (well, not without fudging things a bit). You have two options:

1. Loop through the parent element's childNodes (or children) list, or

2. Fudge things a bit and use querySelector

#1 is fairly obvious, but for pleteness:

var element = document.querySelector('.element');
var targetElement, node;
for (node = element.firstChild; node; node = node.nextSibling) {
    if (node.nodeType === 1 && node.className.match(/\bthisClass\b/)) {
        targetElement = node;
        break;
    }
}

Or if you can rely on using a modern-ish browser, you can use firstElementChild and nextElementSibling and skip the nodeType check.

#2 is more work for the browser and probably hard to justify in this case where you're just looking for something simple like a class name, but here's what fudging querySelector looks like:

var markerId = "some-unique-string-you-know-is-not-used-as-an-id-in-your-document";
var element = document.querySelector('.element');
if (!element.id) {
    element.id = markerId;
}
var targetElement = document.querySelector('#' + markerId + ' > .thisClass');
if (element.id == markerId) {
    element.id = "";
}

You can see how that works: We make sure the element has an id, then use a direct child binator with document.querySelector (not element.querySelector) looking for the first immediate child of the element with that id. Then we remove the id if we set it.

Again, it's more work for the browser, and the code's not shorter, but there might be use cases if you have plex selectors...

Try this code to visualize it:

(function () {
  'use strict'

  var element1 = document.querySelector('.element')
  var element2 = document.querySelector('.thisClass')

  /* .element will have a red border */
  /* .thisClass will have a yellow border */

  element1.style.border = '5px solid red'
  element2.style.border = '5px solid yellow'
})()

I created a demo on jsBin to try that out: demo

As you can see, document.querySelector always returns the first element in document order.