Javascript 如何以类型安全的方式从DOM节点（而不是元素）获取属性？

我正在编写一个刮取DOM的函数，并使用

Flow

实现类型安全

假设我有一些选择器

.foo>span

的

DOM节点的任意集合，每个集合都有一个数据属性
datafoo

如果我想从他们每个人那里得到
data foo
，我通常会这样做：

// grab NodeList & convert to array
const fooNodeArray = Array.from(document.querySelectorAll('.foo > span'))

fooNodeArray.map(node => {
  return node.getAttribute('data-foo')
})

但根据Flow，这不是类型安全的，因为它并不总是有一个方法
getAttribute（）

当
节点
是
元素节点
时，
getAttribute（）
（或相关的
属性
成员）仅存在于
节点上

如果这些
元素
具有
id
或特定的
className
，我可以使用
getElementById（）/-className（）
，但不幸的是，它们只能通过
.foo>span
选择

所以我试过这样的方法：

fooNodeArray.map(node => {
  return node.nodeType === 1 ? node.getAttribute('data-foo') : null
})

…但流继续拒绝它

我很确定这个
节点类型
保护将防止
类型错误
，但我试图避免忽略流（或使用
/$FlowFixMe
来抑制错误）

是否有一种类型安全的方法可以使用
domapi
从
DOM节点
获取
属性
 DOM级别4中的节点不再具有属性（请参见和）；属性只存在于
元素
上，因此您可能需要指示在
节点=>{…}
箭头函数中，
节点
参数的类型为
元素
，而不是泛型
节点

请注意，从技术上讲，这已经是
文档的情况。querySelectorAll
不返回一般节点列表，而是返回包含
元素
对象的节点列表（请参阅）。因此，这是另一个选项：如果您可以告诉Flow您的
FoonDearray
是一个
元素[]
，而不是
节点[]
，它就不应该再抱怨
getAttribute
。
尝试将其包装在
类型的节点中。getAttribute==“function”
检查？我不熟悉Flow是如何解析代码的，但这足以避免实际的类型错误。您使用的是哪个版本的Flow？您的代码片段类型在Flow站点上检查得很好：感谢您指出@loganfsmyth。我在37节。我做了一些检查，我认为罪魁祸首是我对实际代码中的函数所做的一些手动键入，这使Flow相信
节点
是
节点
，而实际上它们是
HTMLElement
。嗯，现在回顾一下，它看起来像
querySelectorAll
返回
节点列表
。但由于
HTMLElement
实现了
元素
，所以它应该认识到
querySelectorAll节点列表
的成员是
元素
并没有人会想到。在这种情况下，询问的结果可能比Stackoverflow更好。