从DOM中读取很多元素

我知道JS的基本知识，但我想把它作为下一步。从DOM中读取很多元素

我想在很多元素的JS帮助下改变CSS。问题是，我知道要选择元素的唯一方法是

const name = document.getElement...(id/class/tag etc.);

所以我可以在以后通过它的名字指的是元素，并通过改变它的风格：

name.style.cssproperty = "something";

这是好的，但是当我已经有10个元素时，我觉得这样做效率很低。

所以我的问题是，有没有更好的方式来更有效地动态改变CSS，所以我的代码开始看起来并不像这样：

const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
etc...

或者是正常的，有这么多的变数？

我希望我的问题可以理解。

PS：

我刚开始学习模块化JavaScript！这对我的问题有什么帮助吗？

来源

2016-12-01 Balázs Orbán

您可能想要使用：数组，对象，for循环和'document.querySelectorAll'。所有人都说，你也可能想尽可能避免修改'style'，而只是倾向于切换类。 – zzzzBov

你试图改变的CSS的本质是什么？这一切都非常相似吗？正如@zzzzBov所说的，最好的方法是使用你在样式表中创建的类。 –

例如，请参阅此链接，了解如何通过类名称获取多个元素，然后按照任意条件过滤得到的数组https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – user44

您可以获取由给定课程的所有元素：

const elements = document.querySelectorAll('my-class');

现在，你可以通过提取的元素循环：

for (var i = 0; i < elements.length; i++) { 
    elements[i].style.cssproperty = "something"; 
}

或者，如果ES6 +是在你的环境中可用：

elements.forEach(element => element.style.cssproperty = "something");

来源

2016-12-01 22:44:09

从DOM中读取很多元素

回答

相关问题