Can anyone help me with how I can locate the 3rd div inside my parent nav-user-dd
using Traversing the dom? My goal is to locate the nav-user-ddli
and add a class it using Dom Traversing. Thanks
.nav-user-ddli {
background: yellow
}
.nav-user-ddli.addClass {
background: green
}
<div id="btnNavUser" class="nav-user-dd">
<div class="nav-user-img"></div>
<div class="nav-user-name">John Doe</div>
<div class="nav-user-ddli">
<div id="btnLogoutF" class="nav-user-ddli-item">test</div>
<div id="btnLogoutF" class="nav-user-ddli-item">
<a href="#">test</a>
</div>
</div>
</div>
2
Answers
You can either directly with class name
nav-user-ddli
(?) or this selector.nav-user-dd>div:nth-child(3)
You can do it by selecting the parent element with
getElementById
then, traverse its children with
children
propertyfinally, add the desired class with