html - Javascript:: Select sibling(s) object(s) with querySelector -

title pretty self explanatory...

here 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 able <span class="now hand"></span> in between <div class="timeline hand"></div> via queryselector

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

i'm thinking if there more convenient way pick object relative id children(s) or sibling(s) number instead of using id or class name.

you use standard descendant selector (a space between #player , .now.hand):

var text = document.queryselector("#player .now.hand").innerhtml;  var p = document.createelement('p');  p.innerhtml = "text '" + 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 hand</span></div>  </div>

i'm thinking if there more convenient way pick object relative id children(s) or sibling(s) number instead of using id or class name.

if in event handler (or anywhere else start out reference element), yes, can use parentnode find parent (or repeatedly find ancestor), can use queryselector on element within it, etc.

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