CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ELIAS YOUSSEF
ELIAS YOUSSEF

Reputation: 79

selecting elements javascript

I'm making a script that will notify you when someone is online on whatsapp web and i have this:

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

now the problem is that i'm selecting an element by the class "emojitext ellipsify" th 19th and if someone texts me another element with the class "emojitext ellipsify" will be made and the 19th won't be the status anymore, so i want to know if i can select an element with the same method from css which is : element>element like this (div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify) or any other possible way.

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>

Upvotes: 0

Views: 242

Answers (2)

Samet Alaca
Samet Alaca

Reputation: 34

You could use JQuery, much simpler

$('parent > child')

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

Upvotes: 2

Pablo Matias Gomez
Pablo Matias Gomez

Reputation: 6813

What you are looking for is document.querySelectorAll

With that function, you can select elements with a selector, the same used with css. So, you could do this:

document.querySelectorAll(".emojitext.ellipsify")

Or put a better selector, in order to get the desired elements, and not others.

Your example would be:

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

Upvotes: 4

Related Questions