javascript - Javascript 从嵌套的 Div 获取 Div 信息

Question

我正在尝试制作一个 google chrome 扩展程序，该扩展程序可以从 div、在线游戏网站、拍卖网站等获取倒数计时器数量。在获得数量后，我可以在注入的 div 中发布不同的时间计算的HTML。

我的 div 注入效果很好。抓紧时间是个问题。

我从中获取倒计时信息的当前站点是一个游戏站点。我找到了包含倒计时信息和 div id 名称的 div，但实际的倒计时信息位于没有 id 的嵌套 div 中。

div的结构如下：

<div id="countdowndiv">
   <div class="info">
       <div class="time">
           1m 39s
       </div>
   </div>
</div>

有多个具有“时间”和“信息”类的 div，所以我认为我不能使用 document.getElementsByClassName()。

反正有没有得到这个倒计时金额？

score 3 · Accepted Answer

有很多方法，一种你可以沿着 dom 遍历：

document.getElementById('countdowndiv').children[0].children[0].innerHTML

score 0 · Accepted Answer

你可以使用document.querySelectorAll('div#countdowndiv div#time')，但你应该注意它不是完全跨浏览器兼容的。更多信息在这里。

score 0 · Accepted Answer

好吧，由于您不必担心跨浏览器问题（因为唯一的目标浏览器是 Chrome），您可以安全地使用document.querySelector()来获取具有单个选择器表达式的特定元素，结合和的强大getElementsByClassName功能getElementById。例如：

var countDownNode = document.querySelector('#countdowndiv .time'),
    countDown     = countDownNode && countDownNode.innerHTML;

不过，如果结构与您在问题中显示的完全一样，那么还有一种更简单的方法：

var countDown = document.getElementById('countdowndiv').textContent;

...作为textContent财产，引用文档，'。..返回每个子节点的textContent属性值的串联，不包括注释和处理指令节点'。您可以trim在给主解析块之前使用它，或者保持原样。

3 回答 3