如何按类名称获取所有选择器，这些类名称是在vanilla JavaScript中动态附加的？

我需要获得/计算有多少具有公共类

target

名称的元素“可用”。DOM中物理上不存在这些元素上的任何元素。这些项目已在页面完全加载后添加

下面

当I

console.log（目标）时我得到了
[]

当我单击这些方括号时，它们会展开，并且
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
});

请不要使用jQuery。
您可以在
DOMContentLoaded
事件中调用您的检查脚本：

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

如果希望在运行时添加某些内容，也可以使用
domsubtreemedited
事件

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

你的问题很令人困惑

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

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

我需要获取/计算有多少具有公共类目标名称的元素“可用”。DOM中物理上不存在这些元素上的任何元素

那么元素是可用的，但不在DOM中？这是什么意思

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

你说的满载是什么意思？与加载的DOMContentLoaded相同？或者完全加载，即帮助构建页面的所有JS也已完成

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

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

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

发件人：

elements
是找到的元素的liveHTMLCollection

将脚本作为最后一项包含在
标记中。这样，Dom在您运行脚本之前已呈现。@jh3y-它不会捕获任何已动态添加的内容（除非添加这些内容的脚本在此之前运行，并且不是异步的）…这就是问题所在。没错@昆汀是对的！这就是重点。捕捉动态添加的内容。@jh3y-不，不会的：我对这里使用“选择器”这个词感到非常困惑，但有4个向上投票的事实表明我缺少了一些东西。@hsh，谢谢，但您的代码没有按预期工作。请看我编辑的问题
DOMSubtreeModified
的触发次数与
.target
项的数量相同。所以
DOMContentLoaded
非常好，因为它只运行一次，但返回空数组和0作为长度。当
getElementsByClassName
的结果被动态更新时，为什么我需要这样做？那么在添加完所有结果后如何获取它们呢？也许我忘了加上我附加的东西，比如说40个项目，就这样。新项目将不再添加。添加后，
targets
的值将包括所有项目，并且
targets.length
将给出总数。
document.body.addEventListener('DOMSubtreeModified', function(event) {
  var targets = document.getElementsByClassName('target');
  console.log(targets);
});