• Теория
  • Теория

Контент тега <template>, document-fragment

Если вы развернёте taskTemplate в консоли, вы увидите, что внутри него есть некий document-fragment, а уже внутри него тот самый шаблон, который нам нужен.

Что это за document-fragment и как из него достать наш шаблон?

document-fragment или просто фрагмент является хранилищем содержимого тега template. Именно благодаря ему разметка из template не отображается на странице. Вы можете в этом убедиться, если добавите самому тегу стили: например, явную ширину и высоту и яркий фоновый цвет. Тогда вы увидите элемент template на странице, но его содержимое нет.

Если искать элементы через querySelector и другие методы поиска внутри template, то мы не получим нужные нам элементы. Они лежат в свойстве content этого тега. Это свойство и содержит document-fragment, внутри которого уже можно искать привычными методами поиска.

<body>
  …
  <template id="text-template">
    <p class="text"></p>
  </template>
</body>

Если мы хотим найти элемент в шаблоне, надо искать так:

var template = document.querySelector('#text-template');
// Нашли template в документе

var content = template.content;
// Получили содержимое, фрагмент

var text = content.querySelector('.text');
// Нашли нужный шаблон

Эту запись можно сократить. Например, записать в отдельную переменную контент, а в другую искомый шаблон.

var textTemplate = document.querySelector('#text-template').content;
var text = textTemplate.querySelector('.text');

Такая запись удобней, потому что отдельно в коде элемент template обычно не используют. Вся работа ведётся с его контентом и шаблоном, который в этом контенте хранится.

В шаблоне можно менять текст, классы, а затем добавлять элементы на страницу. Это мы сделаем в следующих шагах. А пока найдём content и внутри него элемент с классом item, который является шаблоном новой задачи.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Манипуляции с DOM» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.