Title is pretty much self explanatory...

Here is my code :

<div id=player>
    <div class="button hand">&#9658;</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand"></span></div>
</div>

I want to be able to get the <span class="now hand"></span> which is in between <div class="timeline hand"></div> via querySelector

var now=document.querySelector('#player>_____________.now.hand');

I'm also thinking if there is more convenient way to pick object from the relative id by children(s) or sibling(s) number instead of using id or class name.

Title is pretty much self explanatory...

Here is my code :

<div id=player>
    <div class="button hand">&#9658;</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand"></span></div>
</div>

I want to be able to get the <span class="now hand"></span> which is in between <div class="timeline hand"></div> via querySelector

var now=document.querySelector('#player>_____________.now.hand');

I'm also thinking if there is more convenient way to pick object from the relative id by children(s) or sibling(s) number instead of using id or class name.

• javascript
• html
• css-selectors

• 1 What's wrong with document.querySelector("#player .timeline.hand .now.hand") ? – adeneo Commented Apr 25, 2015 at 16:21
• What is the role of _____________? – Ram Commented Apr 25, 2015 at 16:21
• 1 @Hezi-Gangina: Then what you have is not your actual code. Please show your actual code. – BoltClock Commented Apr 25, 2015 at 16:24
• 1 Works perfectly fine for me -> jsfiddle/adeneo/mgo4yr12 – adeneo Commented Apr 25, 2015 at 16:24
• 1 @aneneo You are de man!!! I forgot to add space between .timeline.hand.now.hand damn!!! damn! 1 single Whitespace is the answer! Thanks!!! You can post that as an answer :-) – Hezi-Gangina Commented Apr 25, 2015 at 16:28

2 Answers 2

You use a standard descendant selector (a space between #player and .now.hand):

var text = document.querySelector("#player .now.hand").innerHTML;
var p = document.createElement('p');
p.innerHTML = "Text is '" + text + "'";
document.body.appendChild(p);

<div id=player>
    <div class="button hand">&#9658;</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand">text in now hand</span></div>
</div>

I'm also thinking if there is more convenient way to pick object from the relative id by children(s) or sibling(s) number instead of using id or class name.

If this is in an event handler (or anywhere else you start out with a reference to some element), yes, you can use parentNode to find a parent (or repeatedly to find an ancestor), you can use querySelector on an element to only look within it, etc.

So for example:

document.body.addEventListener("click", function(e) {
  var targetClass = e.target.className;
  if (/\bbutton\b/.test(targetClass) && /\bhand\b/.test(targetClass)) {
    alert(e.target.parentNode.querySelector(".now.hand").innerHTML);
  }
}, false);

.button.hand {
  color: blue;
  font-weight: bold;
}
.now.hand {
  color: green;
}

<div>
    <div class="button hand">Click me</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand">First hand</span></div>
</div>
<div>
    <div class="button hand">Click me</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand">Second hand</span></div>
</div>
<div>
    <div class="button hand">Click me</div>
    <div class=time>00:00/00:00</div>   
    <div class="timeline hand"><span class="now hand">Third hand</span></div>
</div>

Your span does not have any siblings. The easiest way to select it here would be document.querySelector('.now.hand') (Did you mean to apply two classes to the span? If not, connect them w/ a hyphen to use one class)

If you want to specify the span that is a descendant of the player, this would work: js document.querySelector('#player span.now.hand') Learning to use CSS selectors will help here.