如何通过类名获得在JavaScript中动态添加的所有选择器

How to get all selectors by class name that were dynamically appended in vanilla JavaScript?

本文关键字：添加 动态 选择器 JavaScript 何通过      更新时间：2023-09-26

我需要获得/计算有多少元素具有一个共同的类target名称是"可用的"。这些元素在DOM中都不存在。这些项是在页面完全加载后添加的。

下面的

var targets = document.getElementsByClassName('target');

当我console.log(targets); 时，我得到 []。

当我点击这些方括号时，它们展开，target项似乎出现了，但在它们旁边有一条消息:

左边的对象值在记录时被快照，下面的值是

所以我假设当DOM还没有填充target元素时，我做了console.log。如何获取有关动态添加元素的信息?

编辑:

我检查了hsh的功能和

document.body.addEventListener('DOMSubtreeModified', function(event) {
    var targets = document.getElementsByClassName('target');
    console.log(targets.length);
    /**
     * If I have 40 target elements, this will be called 40 times :/ showing first bunch of zeros then finally number will reach to 40
     */
});
/**
 * So this would be ideally (called only once) but this always shows empty array and 0
 */
document.addEventListener('DOMContentLoaded', function(event) {
    var targets = document.getElementsByClassName('marker');
    console.log(targets); // always shows []
    console.log(targets.length); // always shows 0
    //while I can play with those target selectors in Chrome Dev Tools
});

p。请不要使用jQuery

您可以在DOMContentLoaded事件中调用检查脚本:

document.addEventListener('DOMContentLoaded', function(event) {
  var targets = document.getElementsByClassName('target');
  console.log(targets);
});

也可以使用DOMSubtreeModified事件，如果你期望在运行时添加一些东西。

document.body.addEventListener('DOMSubtreeModified', function(event) {
  var targets = document.getElementsByClassName('target');
  console.log(targets);
});

JSFiddle

你的问题很令人困惑。

我需要得到/计算有多少选择器

"选择器"是一种定位/寻址元素的方式。选择器用于查找或匹配元素。例如，.foo是选择器，它将元素与类"foo"匹配。在您的例子中，您的意思是要获取/计数有多少元素。

我需要得到/计数有多少元素与一个共同的类目标名称是"可用的"。这些元素在DOM中不存在。

所以元素是可用的，但不是在DOM?这是什么意思?

这些项在页面完全加载后添加。

满载是什么意思?和DOMContentLoaded一样?或者在帮助构建页面的所有JS都已经完成的意义上完全加载?

最简单的方法是等待所有添加元素的逻辑完成运行，然后计算getElementsByClassName。你为什么不能这么做?

如果由于某种原因，您之前计算了getElementsByClassName，或者在页面加载时，您会发现在任何给定的时间点，它仍然反映了一个最新的元素列表，因为getElementsByClassName返回一个活动集合，该集合随着文档的更改而更新。这也意味着你不需要在加载时运行任何东西，或者观看像DOMSubtreeModified这样的神秘事件。

在任何时间点，包括添加元素之后，targets的值将包含该类的所有元素，而targets.length将给出该类元素的总数。

从MDN:

elements是一个live HTMLCollection

相关文章：