如何遍历原始JavaScript中的dom元素？ [英] How to traverse dom elements in raw JavaScript?

问题描述

我在jQuery中做了所有事情，但现在我回去学习JavaScript。那我怎么能在香草js中做相同的事情：

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();

推荐答案

不要依赖 querySelectorAll（） 。它在IE< = 7或FF 3中不起作用。如果你想使用Vanilla JS，你需要学习如何编写与浏览器兼容的代码：

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
    }
})();

这是的jsfiddle 。您知道， getElementsByClassName（） 是另一种常用的遍历方法，如果它不可用，则需要另一种方法（IE <= 8）

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)

这篇关于如何遍历原始JavaScript中的dom元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！