skip to Main Content

I have the following code and tried getting the item "Menu 8", but here I am getting all menus, not just menu 8, I need to get menu8 and change the class name. What goes wrong with my code?

check here :
https://stackblitz.com/edit/queryselector-x4jzrs?file=index.js,index.html

Check the console for output

var input = document.querySelector('input');
var p = document.querySelector('p.description');
var btn = document.querySelector('button');
const xLinks = [];

document.querySelectorAll('leds-navigation-list > ul').forEach(x => xLinks.push(x));
btn.addEventListener('click',()=>{
  p.textContent = xLinks;
})

console.log("data21", xLinks);

This is the HTML

// Import stylesheets
import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-first js-nav-list-first" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 1"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_AccountInsights ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 1 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><!--bindings={
  "ng-reflect-ng-for-of": ""
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 2"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_certificate ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 2 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 3"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 services-icon ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 3 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><!--bindings={
  "ng-reflect-ng-for-of": ""
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 4"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_simulator ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 4 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 5"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_Technology ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 5 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 6"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_Litmus ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 6 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><!--bindings={
  "ng-reflect-ng-for-of": ""
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 7"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 graph-icon ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 7</div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item js-nav-list-sec-li le-c-nav-list__sec-li ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="second" style="background-color: white;"><i _ngcontent-pji-c443="" aria-hidden="true" class="le-c-nav-list__arrow js-nav-list-arrow icon iconinline float-start x-24 ng-star-inserted down-arw-icon" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-second-link js-nav-list-sec-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 8"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_StrategicIntelligence ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 8 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" class="ng-star-inserted currentActive active"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="js-nav-list-innerlink" ng-reflect-ng-class="[object Object]"><span _ngcontent-pji-c509="" secondnavigationspan="" class="le-c-nav-list__sec-mar le-c-nav__nomar le-u-header-md le-u-text-neutral-80 ng-star-inserted">Sub Menu 1</span><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="js-nav-list-innerlink" ng-reflect-ng-class="[object Object]"><span _ngcontent-pji-c509="" secondnavigationspan="" class="le-c-nav-list__sec-mar le-c-nav__nomar le-u-header-md le-u-text-neutral-80 ng-star-inserted">Sub Menu 2</span><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="js-nav-list-innerlink" ng-reflect-ng-class="[object Object]"><span _ngcontent-pji-c509="" secondnavigationspan="" class="le-c-nav-list__sec-mar le-c-nav__nomar le-u-header-md le-u-text-neutral-80 ng-star-inserted">Sub Menu 3</span><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="js-nav-list-innerlink" ng-reflect-ng-class="[object Object]"><span _ngcontent-pji-c509="" secondnavigationspan="" class="le-c-nav-list__sec-mar le-c-nav__nomar le-u-header-md le-u-text-neutral-80 ng-star-inserted">Sub Menu 4</span><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 9"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_certificate ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 9 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 10"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_ResidencePermit ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 10 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><li _ngcontent-pji-c509="" ledsnavigationlistitem="" class="leftpanel-item ng-star-inserted" _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);" class="DSA-first-link js-nav-list-first-link" ng-reflect-ng-class="[object Object]"><div _ngcontent-pji-c509="" class="d-flex align-items-center item-font collapsed ng-star-inserted" title="Menu 11"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span _ngcontent-pji-c509=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><i _ngcontent-pji-c509="" class="icon x-24 icon_adjustment ng-star-inserted" ng-reflect-ng-class="[object Object]"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" class="le-u-mar-l-16 le-c-nav__nomar marT2 le-u-text-neutral-80 collapsed ng-star-inserted">Menu 11 </div><!--bindings={
  "ng-reflect-ng-if": "true"
}--></div><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></a><leds-navigation-list _ngcontent-pji-c509="" secondlist="" level="second" _nghost-pji-c444="" ng-reflect-level="second" class="ng-star-inserted"><ul _ngcontent-pji-c444="" class="le-c-nav-list le-c-nav-list--pin le-c-nav-list--multimenu le-c-nav-list-sec js-nav-list-sec hide" ng-reflect-ng-class="le-c-nav-list--pin le-c-nav-li" media="max-width: 1px"><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul></leds-navigation-list><!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--container--><!--container--></li><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul>
`;

var input = document.querySelector('input');
var p = document.querySelector('p.description');
var btn = document.querySelector('button');
const xLinks = [];

document.querySelectorAll('leds-navigation-list > ul').forEach(x => xLinks.push(x));
btn.addEventListener('click',()=>{
  p.textContent = xLinks;
})

console.log("data21", xLinks);

Once I get the item "Menu 8" I need to change the class from

le-c-nav-list le-c-nav-list–pin le-c-nav-list–multimenu
le-c-nav-list-sec js-nav-list-sec

to

le-c-nav-list le-c-nav-list–pin le-c-nav-list–multimenu
le-c-nav-list-sec js-nav-list-sec hide

2

Answers


  1. Chosen as BEST ANSWER

    This works !

    document.querySelectorAll('Li > a > DIV > DIV')
    

  2. As querySelectorAll() returns an NodeList, you should have something like this.
    document.querySelectorAll('leds-navigation-list > ul')[7];

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search