Document.Queryselector Always Returns Null

Why is my document.querySelector returning null?

document.querySelector("#sign-in-box");

targets the id of the element
so you should either update the JavaScript selector

document.querySelector("#sign-in-box");

to

document.querySelector(".sign-in-box");

or update the html to

 <div class="sign-in-input-group">

to

<div id="sign-in-input-group">

Document.querySelector returns null until element is inspected using DevTools

As already noticed, the sponsored links are simply not at their position before some mouse event occurs. Once the mouse event occurs, the elements are added to the DOM, supposedly this is how Facebook avoids people crawling it too easily.

So, if you have a quest to find the sponsored links, then you will need to do the following

• find out what is the exact event which results in the links being added
• conduct experiments until you find out how you can programmatically generate that event
• implement a crawling algorithm that does some scrolling on the wall for a long while and then induces the given event. At that point you might get many sponsored links

Note: sponsored links are paid by companies and they would not be very happy if their ad slots are being used up by uninterested bots.

document.querySelector() always return null when clicking on React Router Link the first time but will return correctly after

It's because handleActiveLine will trigger before setActive(true) of CustomLink.tsx

Add a callback in CustomLink.tsx:

const CustomLink: React.FC<Props> = ({ onActive }) => {

  useEffect(() => {
    if (active) {
      onActive();
    }
  }, [active]);

}

In Navbar.tsx:

const Layout: React.FC = ({ children }) => {
  
  function handleOnActive() {
     // do your query selector here
  }

  // add onActive={handleOnActive} to each CustomLink
  return <CustomLink onActive={handleOnActive} />
}

querySelector with 'last-child' returns null when there is an element without class after the classed elements

document.querySelector('.list-group-item:last-child') gives you error as this is not the last element of #items, it's actually li.

In order to get the last element of an element with a class, grab all elements with document.querySelectorAll(".list-group-item"), (anything with querySelectorAll is put in an array), and loop through this array to retrieve the last element.

I moved document.querySelector('.list-group-item:last-child') at the end or else it would have been overwritten by document.querySelectorAll(".list-group-item").

Hope this helps out.

// select by the class .list-group-item
let items = document.querySelectorAll(".list-group-item");
items.forEach(function(item, index) {
  item.style.color = "red";
});

// select by the class .list-group-item, pseudo class: nth-child(2)
let secondItem = document.querySelector(".list-group-item:nth-child(2)");
secondItem.style.color = "coral";

// select by the element <li>, pseudo class: last-child
let liLastItem = document.querySelector("li:last-child");
liLastItem.style.color = "cyan";

// select by the class .list-group-item, pseudo class: last-child
let lastItems = document.querySelectorAll(".list-group-item");
lastItems.forEach(function(lastItem, index) {
  if (index === lastItems.length - 1) {
    lastItem.style.color = "purple";
  }
});

<div class="container">
  <div id="main" class="card card-body">
    <h2 class="title">
      Items
    </h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">
        Item 1
      </li>
      <li class="list-group-item">
        Item 2
      </li>
      <li class="list-group-item">
        Item 3
      </li>
      <!-- Not classed <li> before classed <li>s -->
      <li>Item 3.5</li>
      <li class="list-group-item">
        Item 4
      </li>
      <!-- Not classed <li> after classed <li>s-->
      <!-- this causes error -->
      <li>Item 5</li>
    </ul>
  </div>
</div>