Question

我需要获取/计算具有公共类target名称的多少元素是“可用的”。这些元素在DOM中没有物理存在。这些项目已在页面完全加载后添加。

下面

var targets = document.getElementsByClassName('target);

当我console.log(targets); 我 []。

当我点击这些方括号时，它们会展开，target项似乎会出现，但旁边会显示一条消息：

记录时左边的对象值被快照，下面的值为刚刚评估过。

所以我假设在尚未填充console.log元素的DOM时我做了target。如何获取有关动态添加元素的信息？

编辑：

我检查了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
});

PS。请不要jQuery。

Answer 1

您可以在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

Answer 2

你的问题很混乱。

我需要获取/计算有多少选择器

A＆＃34;选择器＆＃34;是一种定位/寻址元素的方法。选择器用于查找或匹配元素。例如，.foo是选择器，它将元素与类"foo"匹配。在您的情况下，您的意思是您想要/计算多少元素。

我需要获取/计算具有公共类目标名称的多少元素＆＃34;可用＆＃34;。这些元素在DOM中没有物理存在。

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

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

满载是什么意思？与DOMContentLoaded相同？或者说在所有JS帮助构建页面的意义上也完全加载了吗？

最简单的方法是等到添加元素的所有逻辑都运行完毕，然后评估getElementsByClassName。你为什么不这样做？

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

在任何时候，包括添加元素后，targets的值都会包含该类的所有元素，targets.length将给出此类元素的总数。

来自MDN：

elements是找到元素的实时 HTMLCollection。

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

2 个答案: