I'm trying something like this:

var pin = document.querySelector("#notice ul li div p a");

The idea is to narrow down the observer and filter only the relevant element(s) in this case all 'a' inside the nested tags. The ID 'notice' is the only tag with an ID, I then need to select the first 'ul' then 'li' and so on, until I reach the 'a' I'm interested in.

Passing this to the observer, which is listening with the following options:

const config = { attributes: true, childList: true, subtree: true };

So I have the observer.observe(pin, config); and relative let observer = new MutationObserver(mutations => { However I must be doing something wrong sing it is not pulling anything. It only works if I use this:

var pin = document.querySelector("#notice");

How can I limit the observer to only relevant portion I'm interested in? I know I could monitor the whole document body, but will affect CPU load and do unnecessary operations since what I need to isolate in just a specific tag.

this is the sample HTML I'm workin on

<section id="notice">
<ul>
   <li>      
      <div>  
          <p>
            <a href="locale.html?58651456454">Translate</a>
      </p>
      </div>
   </li>
</ul>
</section>