Question

我正在创建一个脚本，当有人在whatsapp网站上在线时会通知你，我有这个：

var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
  console.log("online notification failed");
} else {
  if (y.innerText === 'online') {
   new Notification("contact is online");
   window.clearInterval(onlineCheck);
}
}
},1000);

现在的问题是我正在选择一个元素“emojitext ellipsify”第19章，如果有人给我发了短信，那么另一个元素将会出现“emojitext ellipsify”，并且第19个赢了不再是状态，所以我想知道我是否可以用css中的相同方法选择一个元素：element>element 像这样（div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify）或任何其他可能的方式。

var onlineCheck = window.setInterval(function() {
  var y = document.getElementsByClassName("emojitext ellipsify")[19];
  if (y == null) {
    console.log("online notification failed");
  } else {
    if (y.innerText === 'online') {
      new Notification("contact is online");
      window.clearInterval(onlineCheck);
    }
  }
}, 1000);

<header class="pane-header pane-chat-header">
  <div class="chat-avatar">
    <div class="avatar icon-user-default" style="*somestyle*">
      <div class="avatar-body">
        <img src="*srcpath*" class="avatar-image is-loaded">
      </div>
    </div>
  </div>
  <div class="chat-body">
    <div class="chat-main">
      <h2 class="chat-title" dir="auto">
<span class="emojitext ellipsify" title="*person'sname*"><!-- react-text: 3216 -->*person'sname*<!-- /react-text --></span>
</h2>
    </div>
    <div class="chat-status ellipsify">
      <span class="emojitext ellipsify" title="typing…"><!-- react-text: 3219 -->*the info that i need to get(typing…)*<!-- /react-text --></span>
    </div>
  </div>
  <div class="pane-chat-controls">
    <div class="menu menu-horizontal">
      <div class="menu-item">
        <button class="icon icon-search-alt" title="Search…"></button>
        <span></span>
      </div>
      <div class="menu-item">
        <button class="icon icon-clip" title="Attach"></button>
        <span></span>
      </div>
      <div class="menu-item">
        <button class="icon icon-menu" title="Menu"></button>
        <span></span>
      </div>
    </div>
  </div>
</header>

Answer 1

您要找的是document.querySelectorAll

使用该功能，您可以选择带有选择器的元素，与css一样。所以，你可以这样做：

document.querySelectorAll(".emojitext.ellipsify")

或者选择一个更好的选择器，以获得所需的元素，而不是其他元素。

你的例子是：

document.querySelectorAll("div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext.ellipsify")

Answer 2

你可以使用更简单的JQuery

$('parent > child')

https://api.jquery.com/child-selector/

选择元素javascript

2 个答案: