Question

I do everything in jQuery but now am going back to learn JavaScript proper. So how could I do the equivalent of this in vanilla js:

$('ul li a', '#myDiv').hide();

Answer 1

Don’t rely on querySelectorAll(). It doesn’t work in IE <= 7 or FF 3. If you want to use Vanilla JS you need to learn how to write browser compatible code:

(function(){
    var myDiv = document.getElementById('myDiv');

    // Use querySelectorAll if it exists
    // This includes all modern browsers
    if(myDiv.querySelectorAll){
        as = myDiv.querySelectorAll('ul li a');
        for(var i = 0; i < as.length; i++)
            as[i].style.display = 'none';
        return;
    }

    // Otherwise do it the slower way in order to support older browsers

    // uls contains a live list of ul elements 
    // that are within the element with id 'myDiv'
    var uls = myDiv.getElementsByTagName('ul');

    var lis = [];
    for(var i = 0; i < uls.length; i++){
        var l = uls[i].getElementsByTagName('li');
        // l is a live list of lis
        for(var j = 0; j < l.length; j++)
           lis.push(l[j]);
    }
    // lis is an array of all lis which are within uls 
    //within the element with id 'myDiv'

    var as = [];
    for(var i = 0; i < lis.length; i++){
        var a = lis[i].getElementsByTagName('a');
        // a is a live list of anchors
        for(var j = 0; j < a.length; j++)
           a[j].style.display = 'none'; // Hide each one
    }
})();

Here is a JSFiddle. Just so you’re aware, getElementsByClassName() is another commonly used method of traversal which needs an alternative approach if it’s not available (IE <= 8)