我想获得DOM价值

Question

我想获得div.plyr__progress的价值，但我不确定解决这个问题的热情。我无法访问0索引。

console.log(document.getElementsByClassName('plyr__progress')); // [1]
console.log(document.getElementsByClassName('plyr__progress')[0]); //undifined

[1]

HTMLCollection []
0
:
div.plyr__progress
length
:
1
__proto__
:
HTMLCollection
item
:
ƒ item()
length
:
(...)
namedItem
:
ƒ namedItem()
constructor
:
ƒ HTMLCollection()
Symbol(Symbol.iterator)
:
ƒ values()
Symbol(Symbol.toStringTag)
:
"HTMLCollection"
get length
:
ƒ ()
__proto__
:
Object

output

Answer 1

更改document.getElementsByClassName('.plyr__progress') 到document.getElementsByClassName('plyr__progress')

Answer 2

document.getElementsByClassName返回实时 HTMLCollection。这意味着该集合将在添加或删除与其查询匹配的元素时自动更新。

您跑步时

document.getElementsByClassName('plyr__progress')

没有匹配的元素。这就是为什么您的控制台显示在第一行的原因...

  

▶HTMLCollection []

如果有匹配的元素，它将看起来更像

  

▶HTMLCollection [div.plyr__progress]

由于目前没有匹配项，因此此代码...

document.getElementsByClassName('plyr__progress')[0]

导致未定义。

---

因此，在代码执行后的某个时间段 ，添加了一个元素或更改了一个现有元素，使其具有类plyr__progress。由于控制台可以反映对对象的更改，因此可以通过扩展第一个查询的HTMLCollection结果来查看添加的元素。