Categories
Development

DOM selector excluding certain elements

Often we need to select certain html DOM elements excluding ones with certain names/ attributes/ attribute values. Let’s show how to do that.

Suppose we have the following HTML loaded in DOM for further parsing.

<ul class="item">
  <li>
      <a href="#product_detail_MSQA20" class="nav-link">
		Product details </a>
  </li><li>
      <a href="#spares_related_products_MSQA20" class="nav-     link">Product</a>
  </li><li>
      <a href="#tools_MSQA20" class="nav-link">CAD</a>
  </li> 
</ul>

How to fetch/click the links that are not starting from #tools (the 3-d link in the code)? The :not notation comes to rescue. The following selector will do the magic:

a.nav-link:not([href^=\"#tools\"])

The result will be the following:

<a href="#product_detail_MSQA20" class="nav-link">
		Product details </a> 
<a href="#spares_related_products_MSQA20" class="nav-     link">Product</a>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.