- Теория
- Теория
Контент тега <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, который является шаблоном новой задачи.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
