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

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

現場示例

.getElementById , .querySelectorAll , .forEach , .call

這適用於所有現代瀏覽器，僅適用於舊版瀏覽器（如 IE8）。

您不想手動執行跨瀏覽器合規性，您應該為此使用 DOM shim。

您可以將ES5-shim用於.forEach支持。 你可以在這里找到一個使用 Sizzle 的 querySelectorAll polyfill 。

有關詳細的瀏覽器支持，請參閱

• 我可以使用 querySelectorAll
• ES5 兼容性表

不要聽那些抱怨瀏覽器合規性的人。 只需使用Modernizr和朋友在一大堆 polyfills 上拍打，然后你就可以忘記 IE！

Answer 2

不要依賴querySelectorAll() 。 它在 IE <= 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，然后再獲取所有 As：

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" 。