Question

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

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

Answer 1

var as = document.querySelectorAll("#myDiv ul li a"),
    forEach = Array.prototype.forEach;

forEach.call(as, function(a) {
  a.style.display = "none";
});

Live Example

.getElementById，.querySelectorAll，.forEach，.call

这适用于所有现代浏览器，只能在旧版浏览器（如IE8）上中断。

您不希望手动执行跨浏览器合规性，您应该使用DOM填充程序。

您可以使用ES5-shim获得.forEach支持。你可以找到一个使用Sizzle的querySelectorAll polyfill here。

有关详细的浏览器支持，请参阅

不要听那些抱怨浏览器合规性的人。只需使用Modernizr和朋友拍打一大堆polyfill，然后就可以忘记IE！

Answer 2

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

(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）

Answer 3

由于UL元素只能将LI作为子元素，因此最快的POJS方法是获取所有的UL然后全部为：

function doStuff() {
  var uls = document.getElementsByTagName('ul');
  var as;
  for (var i=0, iLen=uls.length; i<iLen; i++) {
    as = uls[i].geElementsByTagName('a');

    for (var j=0, jLen=as.length; j<jLen; j++) {
      as[j].style.display = 'none';
    }
  }
}

对于querySelectorAll解决方案似乎没有任何意义，因为上面的代码可能更快，代码更多，并且可以在每个浏览器中运行回IE 4。

Answer 4

好老document.getElementById或document.getElementsByTagName应该让你开始。

Answer 5

您可以使用querySelectorAll来查找元素，但请记住，jQuery可能会使用额外的技巧来实现兼容性，因此这可能会有不同的行为。

然后您可以遍历该列表（NodeList文档页面上显示的代码，从上一页链接）并设置每个元素的element.style.display = "none"。

如何遍历原始JavaScript中的dom元素？

5 个答案: