如何使用 DOM Traversing 定位第三個 div？

Question

任何人都可以幫助我如何使用遍歷 dom 在我的父nav-user-dd中找到第三個 div 嗎？ 我的目標是找到nav-user-ddli並使用 Dom Traversing 添加一個 class 它。 謝謝

 .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>

Answer 1

您可以直接使用 class 名稱nav-user-ddli (?) 或此選擇器.nav-user-dd>div:nth-child(3)

 document.querySelector(".nav-user-dd>div:nth-child(3)").style.background = 'red'

 <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>

Answer 2

您可以通過使用getElementById選擇父元素來完成

const btnNavUser = document.getElementById("btnNavUser")

然后，用children屬性遍歷它的孩子

const thirdChild = btnNavUser.children[2] 

最后，添加所需的 class 與

thirdChild.classList.add("addClass")

 const btnNavUser = document.getElementById("btnNavUser") const thirdChild = btnNavUser.children[2] thirdChild.classList.add("addClass")

 .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>