javascript - 选择元素javascript

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

现在的问题是，我正在选择第 19 类“emojitext ellipsify”类的元素，如果有人给我发短信给我另一个类“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")