asked on JavaScript - Get Text of Element Based on Either Ancestor or Descendant Element Classes?
JavaScript Only. How would I get the text from the <label for="nav-9" class="md-nav__link"> element (FAQ - line 15 in this example) based on either the ancestor (line 12) <li class="md-nav__item md-nav__item--active md-nav__item--nested"> or the descendant (line 33 or 38 - same class name) <a class="md-nav__link md-nav__link--active" title="Builds" href=""> element. This is for a navigation which I have shortened and is much bigger but the classes will stay consistent for the selected elements.
<ul data-md-scrollfix="" class="md-nav__list">
<li class="md-nav__item">
<a class="md-nav__link" title="Overview" href="">
Overview
</a>
</li>
<li class="md-nav__item">
<a class="md-nav__link" title="Artifactory" href="">
Artifactory
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input checked="" id="nav-9" type="checkbox" data-md-toggle="nav-9" class="md-nav__toggle md-toggle">
<label for="nav-9" class="md-nav__link">
FAQ
<span class="md-nav__icon md-icon">
</span>
</label>
<nav data-md-level="1" aria-label="FAQ" class="md-nav">
<label for="nav-9" class="md-nav__title">
<span class="md-nav__icon md-icon">
</span>
FAQ
</label>
<ul data-md-scrollfix="" class="md-nav__list">
<li class="md-nav__item">
<a class="md-nav__link" title="Deployments" href="">
Deployments
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input id="__toc" type="checkbox" data-md-toggle="toc" class="md-nav__toggle md-toggle">
<label for="__toc" class="md-nav__link md-nav__link--active">
Builds
<span class="md-nav__icon md-icon">
</span>
</label>
<a class="md-nav__link md-nav__link--active" title="Builds" href="">
Builds
</a>
</li>
</ul>
</nav>
</li>
</ul>
Thanks
JavaScriptWeb Development
Last Comment
Michel Plungjan
ASKER
Hi,
Vanilla JavaScript only. Thereare two elements which include the class of md-nav__item--active (line 12 and 31) but the complete class names are different.
Thanks
Vanilla JavaScript only. Thereare two elements which include the class of md-nav__item--active (line 12 and 31) but the complete class names are different.
Thanks
Okay, and you're looking to identify just the one element with that full class name. So just to recap, you want vanilla JS that:
1. Accesses the element with the class name of "md-nav__item md-nav__item--active md-nav__item--nested"
2. From there, find the first descendent element that is a label with the class "md-nav__link".
3. Return the text inside that label.
Is that correct? (Just trying to avoid assumptions)
1. Accesses the element with the class name of "md-nav__item md-nav__item--active md-nav__item--nested"
2. From there, find the first descendent element that is a label with the class "md-nav__link".
3. Return the text inside that label.
Is that correct? (Just trying to avoid assumptions)
ASKER
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you very much for the detailed explanation! Truly appreciate your help and time!
Depending on the stability of placement, this is much shorter
Select the FIRST element with class "md-nav__link" under the element with class "md-nav__item--nested"
Note the space between the class names
If you cannot trust the existence, you can add some optional chaining and a nullish coalescing operator
Select the FIRST element with class "md-nav__link" under the element with class "md-nav__item--nested"
Note the space between the class names
const text = document.querySelector(".md-nav__item--nested .md-nav__link").textContent.trim()
If you cannot trust the existence, you can add some optional chaining and a nullish coalescing operator
const text = document.querySelector(".md-nav__item--nested .md-nav__link")?.textContent?.trim() ?? "not found"
Do you only have one element with the class of md-nav__item--active?