Home > Back-end >  Unable to get menu item using querySelectorAll
Unable to get menu item using querySelectorAll

Time：10-03

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=""  ng-reflect-ng- media="max-width: 1px"><li _ngcontent-pji-c509="" ledsnavigationlistitem=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- 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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- 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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- 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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="second" style="background-color: white;"><i _ngcontent-pji-c443="" aria-hidden="true"  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><span _ngcontent-pji-c509="" secondnavigationspan="" >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="" ><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><span _ngcontent-pji-c509="" secondnavigationspan="" >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="" ><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><span _ngcontent-pji-c509="" secondnavigationspan="" >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="" ><li _ngcontent-pji-c509="" ledsnavigationlistitem="" level="inner" _nghost-pji-c443="" ng-reflect-level="inner" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><span _ngcontent-pji-c509="" secondnavigationspan="" >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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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=""  _nghost-pji-c443="" ng-reflect-level="first" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><a _ngcontent-pji-c443="" href="javascript:void(0);"  ng-reflect-ng-><div _ngcontent-pji-c509=""  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=""  ng-reflect-ng-></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><div _ngcontent-pji-c509="" >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" ><ul _ngcontent-pji-c444=""  ng-reflect-ng- media="max-width: 1px"><span _ngcontent-pji-c509="" ><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span><span _ngcontent-pji-c509="" ><!--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

CodePudding user response：

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

CodePudding user response：

This works !

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

Page link：https//www.codepudding.com/Backend/563229.html

Prev:bstreeview json string to javascript object
Next:How to change the value of all input boxes at once by looping after inputting the value in the input
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding