Javascript 将样式应用于新创建元素的脚本

我正在编写一个脚本，它改变了一个元素的样式，该元素的类以“blocked”开头。所以我有这个代码：

var blockedelements = document.querySelectorAll("[class^=blocked]");
var element = blockedelements[0];
element.style.display="none";

为简单起见，这仅适用于第一个元素，但我知道如何遍历每个元素，并在代码正常工作时遍历代码。webapp使用这个类动态地创建新元素，我希望为每个新创建的元素执行脚本，这是我不知道如何做的。我想要一个纯JS解决方案，而不是jquery。这就是听众的目的吗？我对javascript知之甚少

---

我希望有任何指针，谢谢你，不用手动更改元素每个实例的显示值，你可以使用JavaScript添加一个页面样式规则来隐藏所有指针。这样，您就可以让浏览器为您处理将规则应用于图元的现有实例和未来实例的问题

大概意思：

var rule = "[class^=blocked] { display: none }";
var styleElement = document.createElement("style");

styleElement.type = "text/css";

if (styleElement.style.cssText) {
  styleElement.style.cssText = rule;
} else {
  styleElement.appendChild(document.createTextNode(rule));
}

document.getElementsByTagName("head")[0].appendChild(styleElement);

---

你的问题太宽泛了，但作为一个提示，如果你刚刚开始，看一看可能也会有所帮助。这不需要一个倾听者吗（或者像有人指出的那样）用于监视新节点创建的变异观察者？这种方法基本上类似于向页面添加一个新的css文件，从而确定浏览器应该隐藏以“blocked”开头的类的任何元素。CSS在添加到页面时自动应用于新元素实例。