Javascript documentFragment.querySelector与Safari有关的问题

我正在尝试使用javascript

querySelector

方法检索

documentFragment

中的元素

我在Chrome和Firefox上得到了我所期望的，但在Safari（Mac OS，Safari 12.0.2）上却没有

函数消息{
document.getElementById（“a”）.innerHTML+=s+“
”；
}
变种myRoot，e；
myRoot=document.createDocumentFragment（）；
e=document.createElement（“div”）；
e、 id=“child1”；
e、 innerHTML=“你好！”；
附子（e）；
e=myRoot.querySelector（“div:nth类型（1）”；
如果（e）{
msg（“片段中的第一个div标签：”+e.id）；
}否则{
msg（“检索片段中的第一个div标记时出错”）；
}
document.body.appendChild（myRoot）；
e=document.querySelector（“div:nth类型（1）”；
如果（e）{
msg（“文件中的第一个div标签：”+e.id）；
}否则{
msg（“检索文档中的第一个div标记时出错”）；
}

消息：


插入的div:

在CSS规范之前，要求匹配元素有一个选择器的父元素，如类型的第n个，

第一个子

等

这个新规范仍然处于工作草案状态，实现了这个新行为，现在元素不需要父元素

Safari可能还没有实现新规范的这一部分，但在规范稳定下来后肯定会实现

---

无论如何，这种行为仍应被视为实验性的，您可能更喜欢使用其他方法来做同样的事情（例如，在将片段附加到文档之前，使用一个虚拟元素作为容器）。

为了说明这一点，只有在放置在frag根的元素上使用

：nth xxx

伪选择器时，才会出现差异。i、 e，

querySelector（“div”）

（其作用与选择器btw完全相同）确实有效，如果在

e

div中附加一个元素，并使用类型（1）的

div:n将其作为目标，则效果相同。我对规格不太了解，无法确定它是否真的是一个bug。事实上，
div:nth类型（1）
将以我的小提琴中的内部div为目标（与
div>div:nth类型（1）
相同）：如果你想知道
first child
和其他伪选择器是否也是如此，它们就像是禁用了frag根元素一样。。。。快速阅读这听起来像是最近添加的“匹配元素不需要有父元素”（仍然是草稿）。Safari可能还没有流行起来。谢谢你的回复。现在，找到一个解决办法不是问题。