Javascript 隐藏具有相同类的所有元素，然后添加具有相同类的元素

使用javascript或jquery，我如何解决这样一种情况：首先需要使用class

.manifest

隐藏所有元素，然后在隐藏其余元素后，使用class

.element

将元素添加到DOM中。这显然是很困难的，因为javascript的特性——所以即使是一个变通方法也会让我难以接受

基本上我已经试过了

var rows = document.getElementsByClassName('manifest');
    for (var i = 0; i < rows.length; i++) {
      rows[i].style.display = 'none';
    }

var rows=document.getElementsByClassName（'manifest'）；
对于（变量i=0；i

---

然后在同一脚本的后面添加一个类为

.manifest

的元素，但这不起作用，新元素也被隐藏了。我明白这是为什么，这是有道理的。我只是无法推理出一种方法来实现这一点。

将所有

.manifest

元素放在一个集合中，并在它们上面循环，在迭代时隐藏每个元素（作为最佳实践，使用CSS类而不是内联CSS）。然后，只需显示

.element

项，并在循环完成后创建新的

清单

元素

一般来说，这确实会影响性能，但在这种情况下，这是问题的根源

.getElementsByClassName（）

返回一个“活动节点列表”，该列表在创建匹配元素时以及DOM从此点开始更改时跟踪所有匹配元素。因为您稍后要添加新元素，但是新元素与活动节点列表包含的类相同（

manifest

），因此它是该节点列表的一部分，如果您循环该列表并隐藏所有元素，新元素将是该列表的一部分。从下面的代码中可以看出，无论您单击按钮多少次（并在

清单

类项目上循环），新创建的一个不会消失，因为我们这里不使用活动节点列表--返回“静态节点列表”

document.querySelector（“按钮”）.addEventListener（“单击”），函数（事件）{
//获取所有.manifest项并循环它们
document.queryselectoral（“.manifest”）.forEach（函数（项）{
item.classList.add（“hidden”）；//隐藏该项
});
document.querySelector（“.element”）.classList.remove（“hidden”）；//显示此项
//现在附加一个将显示的新清单元素
让manifest=document.createElement（“div”）；
manifest.textContent=“动态添加的清单元素”；
文件。查询选择器（“div”）。附件子项（清单）；
});
.hidden{display:none；}

清单元素
清单元素
清单元素
清单元素
清单元素
Elment元素
走
查找要附加元素的ref节点
隐藏所有清单节点
将新节点附加到父节点内部
附加清单节点

//获取用于追加的引用
const container=document.getElementsByClassName（'manifest'）[0].parentNode；
//隐藏具有类名称清单的所有元素
from（document.getElementsByClassName（'manifest'））.forEach（x=>x.style.display='none'）
//将新节点添加到DOM
const node=document.createElement（'div'）；
node.className='element'；
node.textContent='新元素'
container.appendChild（节点）；
//将清单节点添加到DOM
const manifestNode=document.createElement（'div'）；
manifestNode.className='manifest'；
manifestNode.textContent='manifest'
appendChild（manifestNode）

显示
显示
显示
如果您使用的是常规DOM属性，为什么这个jquery会被标记？新元素不会自动隐藏。这仅将
display
属性添加到循环运行时具有类的元素中。以后添加的元素将不具有该属性。是否可能有类似于
.manifest{display:none；}
的CSS？这适用于该类的所有元素。
document.queryselectoral（.manifest”）.forEach（函数（项）{item.style.display=“none”；}）
后跟
document.querySelector（.element”）.style.display=“block”| |“inline”
（取决于元素的类型）请发布一条消息。您可以使用使其可执行。
document.getElementsByClassName（'manifest'）[0]
还可以使用
Array.from（document.getElementsByClassName（'manifest'））.forEach（）
确实没有帮助。只需使用
document.getElementsByClassName（'manifest'）.forEach（）
，因为从
返回的节点列表。getEelementsByClassName（）
（即使您不应该使用它）可以使用
.forEach（）
进行迭代。