JavaScript：使用querySelector选择兄弟对象

Question

标题很明显是自我解释的...

这是我的代码：

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

我希望能够通过使用querySelector方法，获取位于<div class="timeline hand"></div>之间的<span class="now hand"></span>元素。

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

我也在考虑，在选取相对id的对象时，是否有更加方便的方法可以通过子节点或兄弟节点编号来进行选取，而不用使用id或class名称。

- Hezi-Gangina

---

document.querySelector("#player .timeline.hand .now.hand") 有什么问题吗？ - adeneo

_____________ 的作用是什么？ - Ram

@adeneo 这正是我所做的... 但不起作用 :( 而________的角色是要替换为..........的字符串。 - Hezi-Gangina

@Hezi-Gangina：那么你所拥有的不是你的实际代码。请展示你的实际代码。 - BoltClock

这对我完美地运作 -> http://jsfiddle.net/adeneo/mgo4yr12/ - adeneo

@aneneo 你太棒了！！！我忘记在.timeline.hand.now.hand之间加空格了，该死！！！该死！只有一个空格就是答案！谢谢！！！你可以把它作为答案发布 :-) - Hezi-Gangina

Answer 1

您可以使用标准的后代选择器（在#player和.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>

我在思考是否有更方便的方法，可以通过子对象或兄弟对象的索引号来选择与相对id相关的对象，而不是使用id或类名。

如果这段代码在事件处理程序中（或者在任何其他地方您已经引用到某个元素），那么是的，您可以使用parentNode查找父级（或重复查找祖先），可以对元素使用querySelector仅在其中查找，等等。

例如：

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>

- T.J. Crowder

Answer 2

您的span没有任何兄弟节点。在这里选择它最简单的方法是document.querySelector('.now.hand')（如果您不想将两个类应用于span，请使用连字符连接它们以使用一个类）

如果您想指定作为player后代的span，则可以使用以下代码： js document.querySelector('#player span.now.hand') 学习使用CSS选择器将有所帮助。

- samlandfried