Question

我正在尝试使用JavaScript documentFragment方法在querySelector中检索元素。

Chrome和Firefox可以达到我期望的效果，但Safari（Mac OS，Safari 12.0.2）却不能达到我的期望。

function msg(s) {
  document.getElementById("a").innerHTML += s + "<br>";
}

var myRoot, e;

myRoot = document.createDocumentFragment();

e = document.createElement("div");
e.id = "child1";
e.innerHTML = "Hello!";
myRoot.appendChild(e);

e = myRoot.querySelector("div:nth-of-type(1)");
if (e) {
  msg("1st div tag in fragment: " + e.id);
} else {
  msg("Error when retrieving 1st div tag in fragment");
}

document.body.appendChild(myRoot);

e = document.querySelector("div:nth-of-type(1)");
if (e) {
  msg("1st div tag in document: " + e.id);
} else {
  msg("Error when retrieving 1st div tag in document");
}

<p>Messages:</p>
<p id="a"></p>
<p>Inserted div:</p>

jsFiddle：https://jsfiddle.net/bwqvrex2/

我错过了什么吗，还是只是一个错误？

Answer 1

在Selectors Level 4 CSS规范之前，要求匹配元素具有nth-of-type，first-child等选择器的父元素。

此新规范仍处于工作草案状态，可实现此新行为，现在元素不需要父级。

Safari可能仍未实施新规范的这一部分，但肯定会在规范稳定后实现。

无论如何，这种行为仍应被认为是实验性的，您可能更喜欢使用其他方式来做同样的事情（例如，使用虚拟元素作为容器，直到将片段追加到文档中为止）。

Safari的documentFragment.querySelector问题

1 个答案: