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>

我希望能够得到<span class="now hand"></span>这两者之间<div class="timeline hand"></div>通过querySelector

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

我也在考虑是否有更方便的方法来从相对 id 中通过孩子或兄弟姐妹编号而不是使用 id 或类名来选择对象。

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>