1

我正在尝试documentFragment使用 javascriptquerySelector方法检索一个元素。

我得到了我对 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/

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

4

1 回答 1

2

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

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

Safari 可能仍然没有实施新规范的这一部分，但当规范稳定时肯定会实施。

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

于 2019-01-01T13:11:15.113 回答