javascript - 在 JavaScript 中选择子项，因为我不能使用 jQuery

Question

我正在使用 jQuery 来确定 #mainNavigation div 中是否存在具有 data-val="-1" 属性的 li。在 jQuery 中这很好用，但我需要在 JavaScript 中做同样的事情。我想不通的是如何深入了解它在 jQuery 中使用选择器的方式。

if($('#mainNavigation ul li ul li[data-val="-1"]')){
   $("#mainNavigation").css("padding-left" , "10px");
};

<div id="mainNavigation">
    <ul>
        <li>
            <ul>
                <li data-val="-1">Title</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

You can use .querySelector():

if (document.querySelector('#mainNavigation ul li ul li[data-val="-1"]')){
   // ...
}

---

Or if you don't need to be so specific about the level, then this:

if (document.querySelector('#mainNavigation li[data-val="-1"]')){
   // ...
}

---

Or without using querySelector:

var lis = document.getElementById('mainNavigation').getElementsByTagName("li");
var found = false;
for (var i = 0; i < lis.length; i++) {
    if (lis[i].getAttribute("data-val") === "-1") {
        found = true;
        break;
    }
}

if (found) {
    // ...
}