I want to extract a specific text which is located between the <li></li> tags in the navigation bar of a html page, but the code's not consistent. The order of the navbar elements changes depending on the conditions that I'm unable to predict. The only thing that doesn't change in the code is the <li></li> tags where the text I want to extract is embedded.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Homepage</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Menu - 1 - Option - 1</a></li>
<li><a href="">Menu - 1 - Option - 1</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Menu - 2 - Option - 1</a></li>
<li><a href="">Menu - 2 - Option - 2</a></li>
<li role="separator" class="divider"></li>
<li><a href="">Menu - 2 - Option - 3</a></li>
<li><a href="">Menu - 2 - Option - 4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Menu - 3 - Option - 1</a></li>
<li><a href="">Menu - 3 - Option - 2</a></li>
</ul>
</li>
<!-- The element I need to access -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
------->[TEXT I WANT TO EXTRACT]<-------
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/account">My Account</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Help</li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</li>
<!-- The element I need to access -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 5<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Menu - 5 - Option - 1</a></li>
<li><a href="">Menu - 5 - Option - 2</a></li>
<li><a href="">Menu - 5 - Option - 3</a></li>
</ul>
</li>
</ul>
</div>
So, the following <li></li> tags of the code never changes, but its placement in the navbar changes:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
------->[TEXT I WANT TO EXTRACT]<-------
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/account">My Account</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Help</li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</li>
When I try to extract the text using querySelector from JavaScript, it sometimes doesn't work because the <li></li> element is no longer the fifth one in the list. Thus, the selector doesn't match:
document.querySelector('li.dropdown:nth-child(5) > a:nth-child(1)');
What would be the safest way for me to extract this text?
