Select children in JavaScript because I can't use jQuery

Question

I'm using jQuery to find out if there is an li with the attribute of data-val="-1" inside the #mainNavigation div. In jQuery this works fine, but I need to do the same thing in JavaScript. What I can't figure out is how to drill down the way it's done using selectors in 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>

possible duplicate of [How to get elements by attribute selector w/ native JavaScript w/o querySelectorAll](http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w-native-javascript-w-o-queryselector) — Aguardientico, Nov 14 '13 at 17:40
@Aguardientico: OP isn't asking how to do it without `querySelectorAll`. — Blue Skies, Nov 14 '13 at 17:47
@BlueSkies but is asking how to select in pure javascript so in that question is the answer. — Aguardientico, Nov 14 '13 at 17:49
@Aguardientico: Sure, but using `querySelector[All]` is an answer too. — Blue Skies, Nov 14 '13 at 17:50

Blue Skies · Accepted Answer · 2013-11-14T17:57:06.983

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) {
    // ...
}

edited Nov 14 '13 at 17:57

answered Nov 14 '13 at 17:50

Blue Skies

2,935
16
19

The 3rd option worked for me, thanks! Aren't the first two options using a jQuery selector by using #mainNavigation? – ech Nov 14 '13 at 18:16
@ech: No, they're using a Selectors API selector. This is native JavaScript code, not jQuery. It's what jQuery uses under the hood. – Blue Skies Nov 14 '13 at 18:40

Select children in JavaScript because I can't use jQuery

1 Answers1