documentFragment.querySelector проблема с Safari - PullRequest
0 голосов
/ 01 января 2019

Я пытаюсь получить элемент внутри documentFragment, используя метод javascript 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/

Я что-то упустил или это просто ошибка?

1 Ответ

0 голосов
/ 01 января 2019

До Уровень селекторов 4 Спецификации CSS требовали, чтобы у соответствующих элементов был родительский элемент для селекторов, таких как nth-of-type, first-child и т. Д.

Эта новая спецификация, все еще находящаяся в состоянии Working Draft , реализует это новое поведение, теперь элементам не нужно иметь родителя.

Возможно, Safari до сих пор не реализовал эту частьновые спецификации, но, безусловно, будут, когда спецификации стабилизируются.

В любом случае, это поведение все еще следует рассматривать как экспериментальное, и вы можете предпочесть использовать другие способы сделать то же самое (например, использовать фиктивный элемент какконтейнер до добавления фрагмента в документ).

...