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');

我也在考虑是否有更方便的方法从子（s）或兄弟号码中选择相对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>

  

我也在考虑是否有更方便的方法从子（s）或兄弟号码中选择相对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>

Answer 2

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

如果你想指定作为玩家后代的跨度，这将有效： js document.querySelector('#player span.now.hand') 学习使用CSS selectors将有助于此。