如何选择/使用元素的子元素。 Javascript

Question

I have a header in my html that has two different classes. Depending on when I scroll down it changes. IN CSS u select descendent with space. In my case .navbar.menu-toggler and .nav_sticky.menu-toggler . I succeded to select .navbar via var h = document.getElementsByClassName(id3)[0]; (id3 being "navbar") but i want to change the style of .menu-toggler And i can't write directly .menu-toggler because i need it when it's withing the class of .navbar .I over complicated the explanation but I hope somebody can help

oH and how can i add a class and remove a class to an element

Answer 1

I have a header in my html that has two different classes. Depending on when I scroll down it changes. IN CSS u select descendent with space. In my case .navbar.menu-toggler and .nav_sticky.menu-toggler . I succeded to select .navbar via var h = document.getElementsByClassName(id3)[0]; (id3 being "navbar") but i want to change the style of .menu-toggler And i can't write directly .menu-toggler because i need it when it's withing the class of .navbar .I over complicated the explanation but I hope somebody can help

oH and how can i add a class and remove a class to an element

Answer 2

I guess you can use document.querySelector to access the toggler.

var menuToggler = document.querySelector(".navbar.menu-toggler");

You'll get the item which has.navbar and.menu-toggler inside it's classList.

I don't thing accessing children by indexes is a good practice. If your HTML document gets updated, your index might point to another DOM element.

Check this answer for more information https://stackoverflow.com/a/59406548/9517443