selecting elements javascript

Question

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>

Are you trying to select the last element with the classes.emojitext and .ellipsify? — Ori Drori
– Ori Drori, Commented Dec 26, 2016 at 17:40
the class is called (.emojitext ellipsify) so it's one class — ELIAS YOUSSEF
– ELIAS YOUSSEF, Commented Dec 26, 2016 at 18:55

Pablo Matias Gomez · Accepted Answer · 2016-12-26 17:39:52Z

4

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

answered Dec 26, 2016 at 17:39

Pablo Matias Gomez

6,8338 gold badges41 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ELIAS YOUSSEF Over a year ago

thank you but i'm trying to get the innertext but it isn't working, i tried this y = document.querySelectorAll("#main>header>div.chat-body>div.chat-status>span.emojitext .ellipsify"); console.log(y.innerText); undefined undefined

ELIAS YOUSSEF Over a year ago

note: i'm using chrome's console to run this script

Pablo Matias Gomez Over a year ago

Remember that the call returns an array of elements. You should use [0] if you want to get the first one

Samet Alaca · Accepted Answer · 2016-12-26 17:42:13Z

2

You could use JQuery, much simpler

$('parent > child')

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

answered Dec 26, 2016 at 17:42

Samet Alaca

342 bronze badges

10 Comments

ELIAS YOUSSEF Over a year ago

the problem is i'm running this script in chrome's console, will your method work?

Samet Alaca Over a year ago

Only if there is a page linked to that console that uses JQuery.

ELIAS YOUSSEF Over a year ago

could you please show me how i should run the script replace this line with your method: var y = document.getElementsByClassName("emojitext ellipsify")[19];

Samet Alaca Over a year ago

The exact translation of that would be : var y = $('.emojitext, .ellipsify')[19];

ELIAS YOUSSEF Over a year ago

I can't manage to get the innertext or innerhtml or even the title of the element i tried those: var y = $('emojitext,ellipsify'); console.log(y.innerText); - var y = $('emojitext,ellipsify'); console.log(y.innerHTML); - var y = $('emojitext,ellipsify'); console.log(y.title);

|

Collectives™ on Stack Overflow

selecting elements javascript

2 Answers 2

3 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related