循环遍历 JavaScript“getElementsByTagName()”对象答案

【问题标题】：Looping through JavaScript "getElementsByTagName()" object循环遍历 JavaScript“getElementsByTagName()”对象
【发布时间】：2014-07-14 23:58:54
【问题描述】：

如何正确循环选择器上从“getElementsByTagName()”返回的对象。我好像没弄好。

例如，如果我有一堆这样的 div：

<div class="wrapper">
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
</div>

我想像这样遍历“getElementsByTagName()”的结果：

var wrapper = document.querySelector(".wrapper");

var divs = wrapper.getElementsByTagName("div");

for (i = 0; i < divs.length; ++i) {
   each = divs[i];
   if (each.classList.contains("test2")) {
    this.style.display = "none";
   }
}

这是一个小提琴：http://jsfiddle.net/Y2Yzv/1/

【问题讨论】：

标签： javascript html object

【解决方案1】：

你在控制台报错：Uncaught TypeError: Cannot set property 'display' of undefined

试试：

var wrapper = document.querySelector(".wrapper");

var divs = wrapper.getElementsByTagName("div");

for (i = 0; i < divs.length; ++i) {
   each = divs[i];
   if (each.classList.contains("test2")) {
    each.style.display = "none";
   }
}

Demo

【讨论】：

如果你放一个console.log(this);，你会看到this是Window对象，它没有样式属性。

【解决方案2】：

each.style.display = "none"; 可以代替 this

this 指的是全局对象，而不是循环中正在迭代的元素。

这里是更正的小提琴：

http://jsfiddle.net/Y2Yzv/4/

【讨论】：

【解决方案3】：

少代码解决方案：

var divs = document.querySelectorAll('.wrapper div');
[].forEach.call(divs, function (div) {
    if (div.classList.contains('test2')) div.style.display = 'none';
});

【讨论】：

【解决方案4】：

将this.style.display = "none"; 更改为each.style.display = "none"

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@aj8uppal 这怎么不回答问题？
我同意它有点稀疏，但这不是删除它的理由。

【解决方案5】：

检查此解决方案： http://jsfiddle.net/ZffWg/

这些是我所做的主要更改

for (i in divs) {
    if (divs[i].className.indexOf("test2") > -1) {
        divs[i].style.display = "none";
    }
}

我删除了i=0，因此循环在数组索引本身上运行。

为了更好的跨平台兼容性，我还使用了className 而不是classList

【讨论】：

【解决方案6】：

let divs_in_wrapper = document.querySelectorAll('.wrapper div');
divs_in_wrapper.forEach((item, index, arr) => {
  if (item.classList.contains("test2")) {
    item.style.display = "none";
  }
});

<div class="wrapper">
  <div class="test1">this is a div</div>
  <div class="test2">this is a div class test2</div>
  <div class="test1">this is a div</div>
  <div class="test2">this is a div class test2</div>
  <div class="test1">this is a div</div>
  <div class="test2">this is a div class test2</div>
</div>
<div class="test2">this is outside a div</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。