javascript - jQueryが使えないのでJavaScriptで子を選択

Question

#mainNavigation div 内に data-val="-1" の属性を持つ li があるかどうかを調べるために jQuery を使用しています。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

使用できます.querySelector()：

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

---

または、レベルについてそれほど具体的にする必要がない場合は、次のようにします。

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

---

または使用せずに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) {
    // ...
}