Mutation Observer - 从 addedNodes.children 获取跨度答案

【问题标题】：Mutation Observer - get span from addedNodes.childrenMutation Observer - 从 addedNodes.children 获取跨度
【发布时间】：2018-04-12 10:10:29
【问题描述】：

我不能使用数字，因为跨度之前可能有一些东西，比如时间戳。

console.log(mutation.addedNodes[0].children);

给我这个

HTMLCollection(4) [span, button.chat-line__username, span, span]
0:span.chat-line__message--badges
1:a.chat-author__display-name
2:span
3:span.message
length:4
__proto__:HTMLCollection

我想将a.chat-author__display-name 存储在一个变量中。最好的方法是什么？

【问题讨论】：

一个 HTMLCollection 只是一个类似数组的对象 - 只需引用你想要的索引。 mutation.addedNodes[0].children[1]
我不能使用数字，我需要通过它的类名来获取它。
@oban_internet，你看到HTMLCollection(4) [span, button.chat-line__username, span, span] 不等于你看到的结果1:a.chat-author__display-name
@oban_internet，显示你的 html 吗？
嘿，我刚刚回到以前版本的脚本，你的解决方案工作我只是在某个地方搞砸了。非常感谢，您可以将其发布为答案以便我标记它吗？

标签： javascript mutation

【解决方案1】：

遍历 HTMLCollection 以找到第一个匹配的元素。

const authorAnchor = [...mutation.addedNodes[0].children]
  .find(child => child.className === 'chat-author__display-name');

【讨论】：

也不是这样。它返回未定义。你是故意在里面放三个点吗？我尝试了使用和不使用它们，但我仍然不确定。
如果它不起作用。您的实际 HTML 不得与您在问题中发布的内容相匹配。是的，这些点是数组扩展语法，它们将类似数组的对象转换为数组。
你说得对，我搞砸了。无论如何感谢您的帮助。我会用“数组传播语法”记下你。

【解决方案2】：

使用mutation.addedNodes[0].querySelector('.chat-author__display-name') 解决了我的问题。

【讨论】：