Javascript:: 使用 querySelector 选择兄弟对象答案

【问题标题】：Javascript:: Select sibling(s) object(s) with querySelectorJavascript:: 使用 querySelector 选择兄弟对象
【发布时间】：2018-06-04 05:45:59
【问题描述】：

标题几乎是不言自明的......

这是我的代码：

<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 或类名。

【问题讨论】：

document.querySelector("#player .timeline.hand .now.hand") 有什么问题？
_____________的作用是什么？
@Hezi-Gangina：那么你所拥有的并不是你的实际代码。请出示您的实际代码。
对我来说非常好 -> jsfiddle.net/adeneo/mgo4yr12
@aneneo 你是男人！！！我忘了在 .timeline.hand.now.hand 之间添加空格该死的！！！该死！ 1个空白就是答案！谢谢！！！您可以将其发布为答案:-)

标签： javascript html css-selectors

【解决方案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 来查找父级（或反复查找祖先），您可以使用@ 987654326@ 只在一个元素上查看，等等。

例如：

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>

【讨论】：

【解决方案2】：

您的 span 没有任何兄弟姐妹。在这里选择它的最简单方法是document.querySelector('.now.hand')（您的意思是对跨度应用两个类吗？如果不是，用连字符连接它们以使用一个类）

如果您想指定作为播放器后代的跨度，这将起作用： js document.querySelector('#player span.now.hand') 学习使用CSS selectors 会有所帮助。

【讨论】：