Given the possible slight change in the html markup in the future, how to write the code correctly and extract the category name to which the product belongs from the penultimate li, regardless of the nesting of the product ? In this example, the HTML markup of bread crumbs.

var crumbs = document.getElementById('crumbs'); crumbs = crumbs.lastElementChild; crumbs = crumbs.previousElementSibling; var productCat = crumbs.getElementsByClassName('text-el'); productCat = productCat[0].innerText; console.log(productCat); 
 <p>tetet</p><ul class="items items-crumbs" id="crumbs"> <li class="btn-crumb"> <a href="https://site-name.ru/" typeof="v:Breadcrumb"> <span class="text-el">Главная</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <a href="https://site-name.ru/shop/category/konditsionirovanie" typeof="v:Breadcrumb"> <span class="text-el">ΠšΠΎΠ½Π΄ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <a href="https://site-name.ru/shop/category/konditsionirovanie/nastennye-split-sistemy" typeof="v:Breadcrumb"> <span class="text-el">НастСнныС сплит систСмы</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <button typeof="v:Breadcrumb" disabled="disabled"> <span class="text-el">Π‘ΠΏΠ»ΠΈΡ‚ систСма Mitsubishi Electric MSZ-HJ25VA-ER1/MUZ-HJ25VA-ER1</span> </button> </li> </ul>

    1 answer 1

    Extract a text node from the last but one li from ul list

    Provided that everyone except your last li has anchors.

    You can like this:

     // Π’Ρ‹Π±ΠΎΡ€ΠΊΠ° всСх li с якорСм ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ul var btns = document.querySelectorAll('#crumbs > .btn-crumb > a > .text-el') // ПослСдний li ΠΈΠ· Π²Ρ‹Π±ΠΎΡ€ΠΊΠΈ console.log(btns[btns.length -1].innerText); 
     <p>tetet</p> <ul class="items items-crumbs" id="crumbs"> <li class="btn-crumb"> <a href="https://site-name.ru/" typeof="v:Breadcrumb"> <span class="text-el">Главная</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <a href="https://site-name.ru/shop/category/konditsionirovanie" typeof="v:Breadcrumb"> <span class="text-el">ΠšΠΎΠ½Π΄ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <a href="https://site-name.ru/shop/category/konditsionirovanie/nastennye-split-sistemy" typeof="v:Breadcrumb"> <span class="text-el">НастСнныС сплит систСмы</span> <span class="divider">/</span> </a> </li> <li class="btn-crumb"> <button typeof="v:Breadcrumb" disabled="disabled"> <span class="text-el">Π‘ΠΏΠ»ΠΈΡ‚ систСма Mitsubishi Electric MSZ-HJ25VA-ER1/MUZ-HJ25VA-ER1</span> </button> </li> </ul>