1с execcommand список команд

Обновлено: 08.07.2024

Есть страничка, которая выводит редактор TINYMCE (обязательно необходимо, что бы он находился в теге BODY, так как испоользую на форме 1С и в теге TEXTAREA, появляются ненужные рамки). Использую её, для редактирования писем. На форме 1С, вывел кнопки для форматирования текста. Осталось вывести всего пару кнопок, которых мне не хватает - это:

Все кнопки делал через "ПолеHTMLДокумента.Документ.execCommand("команда")" и выводил на форму 1С.

1. Изменение размера шрифта (так изменение шрифта, через метод execCommand, меня не устроил, из-за выбора размера (всего 7). Сделал, через "ПолеHTMLДокумента.Документ.getSelection().focusNode.parentNode.style.fontSize = НОВОЕЗНАЧЕНИЕ"). Но и здесь есть свои минусы при использовании меняется всё содержимое текущего тега.

2. Вставка таблицы, соответственно все те кнопки для её форматирования. На сайте tinyMCE, есть описание нескольких команд для execCommand, по вставке таблицы, написано что необходим плагин "table". Так же здесь хочу опомянуть еще одну команду "mceInsertContent", которая позваляет вставлять любое содержимое. Так собственно вопрос в том, что не работают эти команды, через "ПолеHTMLДокумента.Документ.execCommand("команда")", почему? Есть догадки, что все эти команды не работают, потому что используя "ПолеHTMLДокумента.Документ.execCommand("команда")" я не получаю доступ tinyMCE, к его методам.

3. Межстрочный интервал (сделал так же, как размер шрифта, через стили "ПолеHTMLДокумента.Документ.getSelection().focusNode.parentNode.style.marginTop = НОВОЕЗНАЧЕНИЕ"). Здесь меня не устраивает, то что присваивается значение не всему выделению, а только последнему выделенному. Т.е. если мне необходимо уменьшить интервал у нескольких строк, мне придется по каждой строке отдельно настраивать.

По 1-му и 3-му вопросу думаю, что может помочь, если смогу выделенное обрамлять тегами, т.е. типа по выделенному сначало по краям установить теги, а потом изменить стиль для данного тега.

По 2-му вопросу, если нет способа получить доступ к методам tinyMCE, через комобъект, то может помочь метод вставки HTML кода, так я его нашёл "ПолеHTMLДокумента.Документ.write("любое содержимое")", но увы при его использовании теряется весь код страницы, т.е. при просмотре кода страницы, нижеприведённый код меняется на "<HTML><HEAD></HEAD><BODY>любое содержимое</BODY></HTML>"

Начиная с IE10 добавлена поддержка команд «Копировать» и «Вырезать» с помощью метода Document.execCommand(). Так же эти методы доступны в Chrome начиная с версии 43.

Любой текст выделенный в браузере при выполнении одной из этих команд будет скопирован или вырезан в буфер обмена пользователя. Это позволяет предложить пользователю простой метод выделить часть текста и скопировать в буфер обмена.

Это становится крайне полезным в сочетании с API программного выделения текста, что бы задать что скопировать в буфер. Примеры будут рассмотрены в этой статье.

Примеры

Для примера, давайте добавим кнопку которая скопирует email адрес в буфер обмена.

Мы добавим email адрес, в наш HTML, с кнопкой клик по которой будет инициировать копирование email:

Тогда, в наш JavaScript, мы добавим обработчик клика по кнопке, который выделит email из содержимого ссылки js-emaillink, выполнит команду копирования, так что бы адрес электронной почты оказался в буфере пользователя и после этого снять выделение с электронной почты, так что пользователь даже не увидит выделение.

Здесь используется метод API выделения, window.getSelection(), что бы программно выделить текст внутри ссылки, который мы хотим скопировать в буфер обмена пользователя. После вызова document.execCommand() мы можем снять выделение с помощью window.getSelection().removeAllRanges().
Если вы хотите проверить что все прошло успешно, то вы можете рассмотреть результат возвращаемый функцией document.execCommand(). Результат будет false если функция не поддерживается или отключена. Мы «обвернули» execCommand() в try. catch, т.к. команды «вырезать» и «копировать» в некоторых случаях могут вернуть ошибку.

Команда «вырезать» может быть использована для текстовых полей ввода, там, где вы хотите удалить текст и поместить этот текст в буфер.

Использование textarea и кнопки:

Мы можем сделать следующее, что бы «вырезать» содержимое:

queryCommandSupported и queryCommandEnabled

Перед вызовом document.execCommand() вы должны убедится что эти API поддерживаются с помощью document.queryCommandSupported(). В примере выше, мы могли бы заблокировать кнопку, по результатам проверки совместимости, например, так:

Совместимость с браузерами

IE 10+, Chrome 43+ и Opera 29+

Firefox поддерживает данные функции, но требует изменения настроек (см. тут) (Примечание переводчика: при этом довольно давно. Была даже функция чтения из буфера обмена, заблокированная по умолчанию в целях безопасности). Без этого Firefox вернет ошибку.

Это вторая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.

Различные методы включения режима редактирования
Команды редактирования
HTML генерируемый в процессе редактирования
Взаимодействие с DOM

Команды редактирования

В браузерах поддерживается множество команд редактирования. HTML генерируемый этими командами не стандартизирован и отличается от браузера к браузеру. Например, в IE «Bold» сгенерирует код:

hello!

Код, как минимум в IE, несколько старомоден. Во множестве команд используется ужасный тег font:

Генерируемая разметка не является валидным XHTML и как правило даже валидным HTML кодом.

Opera генерирует код сходный с IE (нет, не полностью), используя тег font и так далее.

Safari генерирует форматирование используя span'ы и инлайн CSS. Достоинство подхода Safari в том, что он по крайней мере является валидным HTML 4.01 Strict.

Mozilla поддерживает 2 режима работы — она либо генерирует презентационные теги как IE/Opera или же стилизирует контейнеры как Safari.

Если вы уверены, что вам нужен валидный HTML код, то вам стоит чистить генерированный редактором код на стороне сервера, что бы из этого безобразия получить валидный (X)HTML. (Ну, вам это в любом случае стоит делать, что бы избежать XSS-атак).

Горячие сочетания клавиш

Множество команд доступно через горячие сочетания клавиш, например Ctrl/Cmd + B для полужирного начертания, Ctrl/Cmd + Z для отмены последнего действия и т.д. Но эти сочетания могут различаться в зависимости от локализации браузера.

Назначенные сочетания клавиш изменить нельзя, но их можно перезаписать с помощью скрипта перехватывающего события клавиатуры.

API редактора

Возможно, вы захотите сделать панель управления, что бы позволить пользователю использовать команды редактирования. Это можно сделать с использованием API редактора. Это API не похоже на обычное API DOM, на самом деле это скриптовая адаптация интерфейса IOleCommandTarget, который является COM интерфейсом используемым Microsoft для синхронизации панели управления и редактирования документа.

API находится в объекте document и состоит из метода execCommand и нескольких методов с префиксом «query» которые возвращает информацию о команде.

Все методы принимают ID команды в качестве первого аргумента, это строка, содержащая имя команды. Собственно, методы:

ExecCommand

Выполняет команду применительно к текущему выделению. Некоторые команды переключаются между состояниями в зависимости от контекста. Например, если вы применяете команду «Bold» к выделению, которое уже имеет полужирное начертание, то выделение будет отображено в нормальном начертании. Некоторые команды тредуют аргументов, например forecolor требует в качестве аргумента код цвета.

Некоторые команды вызывают модальные диалоги — например, команда link вызовет диалог, который предложит ввести URL. Диалоги нельзя изменить, но возможно заменить их. Например:

result = document. execCommand ( command , useDialog , value )

Что есть что:
command: Строка; имя команды.
useDialog: Булев тип; Показывать ли встроенный диалог (Не все команды могут вызывать диалоги).
value: Значение, принимаемое командой. Не все команды принимают значения; Если вызывает диалог, то значение береться из него.
result: true если команда выполнена, false если отменена пользователем (закрытием диалога) или команда не может быть выполнена.

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

QueryCommands

Query-команды имеет смысл использовать для определения состояния кнопок на панели управления в зависимости от текущего выделения и положения курсора.

QueryCommandEnabled

Определяет возможно ли выполнение команды применительно к текущему выделению. Например «unlink» можно применить только в том случае, если курсор находится внутри ссылки. Если выделение содержит область недоступную для редактирования, то никакие команды выполнятся не будут.

QueryCommandState

Показывает была ли команда применена к выделению, тоесть если выделение имеет полужирное начертание, то QueryCommandState вернет true для команды bold.

QueryCommandValue

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

Некоторые значения вариируются в зависимости от локализации браузера, например значение для FormatBlock в IE вернет имя для параграфа на языке локализации интерфейса баузера.

Команды, для которых значений нет, например bold, просто вернут false. (API содержит два дополнительных метода, queryCommandSupported и queryCommandIndeterminate, но они слишком глючные, что бы хоть как то их использовать.)

Range и Selection API

Встроенные команды полезны, но невозможно изменить их поведение или добавить нестандартную реализацию. Используя Range и Selection API вы можете использовать произвольные HTML трансформации, которые можно использовать для реализации нестандартных команд.

Проблема в том, что любые трансформации затрагивающие DOM разрушают стек undo, который используется для реализации команд UnDo/ReDo. Это не слишком хорошо, но может быть приемлемой ценой за нестандартные команды.

Range/selection API имеют два основных класса:

Range — непрерывный диапазон символов документа. Диапазон может перекрывать границы элементов. У диапазона есть стартовая и конечная точки. Если стартовая точка совпадает с конечной, то диапазон называется вырожденным.

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

Эти принципы идентичны во всех браузерах, но сами API отличаются по реализации в IE и всех остальных браузерах. IE использует собственное проприетарное решение для range м selection API, остальные браузеры используют W3C DOM Range API в комбинации с нестанжартизированным selection API.

Основное отличие в том, что в IE содержимое диапазона доступно как строка с HTML разметкой. В W3C DOM Range API, содержимое диапазона доступно как дерево узлов DOM.

Пример диапазона

Что бы показать различные подходы, ниже приведена команда, которая применяет тег «code» к текущему выделению.

В IE (editWindow это ссылка на frame в designMode):

var rng = editWindow. document . selection . createRange ( ) ;
rng. pasteHTML ( "" + rng. htmlText + "" ) ;

var rng = editWindow. getSelection ( ) . getRangeAt ( 0 ) ;
rng. surroundContents ( document. createElement ( "code" ) ) ;

Выделение элементов управления

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

В IE возможно выделение более, чем одного элемента одновременно с использование комбинации ctrl+клик. Остальные браузеры не поддерживают концепцию выделения элементов управления; в остальных браузерах выделение это всегда текстовый диапазон.

Выводы

Статья рассматривает основные принципы редактирования данных в браузере. Часть вторая статьи показывает множество примеров применения вышеописанных API.

От переводчика: если это интересно не только мне, то я переведу и вторую статью.

JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.

Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.

Размышляя над подачей материала, я пришел к выводу, что оптимальным будет следование спецификациям с промежуточными и заключительными выводами, сопряженными с небольшими лирическими отступлениями.

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

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

Вот как будет выглядеть наша начальная разметка:

У нас есть список ( ul ) с тремя элементами ( li ). Список и каждый элемент имеют идентификатор ( id ) и CSS-класс ( class ). id и class — это атрибуты элемента. Существует множество других атрибутов: одни из них являются глобальными, т.е. могут добавляться к любому элементу, другие — локальными, т.е. могут добавляться только к определенным элементам.

Мы часто будем выводить данные в консоль, поэтому создадим такую "утилиту":

Миксин NonElementParentNode

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

В чем разница между узлами (nodes) и элементами (elements)? Если кратко, то "узлы" — это более общее понятие, чем "элементы". Узел может быть представлен элементом, текстом, комментарием и т.д. Элемент — это узел, представленный разметкой (HTML-тегами (открывающим и закрывающим) или, соответственно, одним тегом).

У рассматриваемого миксина есть метод, наследуемый от объекта Document , с которого удобно начать разговор.

Небольшая оговорка: разумеется, мы могли бы создать список и элементы программным способом.

Для создания элементов используется метод createElement(tag) объекта Document :

Такой способ создания элементов называется императивным. Он является не очень удобным и слишком многословным: создаем родительский элемент, добавляет к нему атрибуты по одному, внедряем его в DOM , создаем первый дочерний элемент и т.д. Следует отметить, что существует и другой, более изысканный способ создания элементов — шаблонные или строковые литералы (template literals), но о них мы поговорим позже.

Одним из основных способов получения элемента (точнее, ссылки на элемент) является метод getElementById(id) объекта Document :

Почему идентификаторы должны быть уникальными в пределах приложения (страницы)? Потому что элемент с id становится значением одноименного свойства глобального объекта window :

Как мы знаем, при обращении к свойствам и методам window , слово window можно опускать, например, вместо window.localStorage можно писать просто localStorage . Следовательно, для доступа к элементу с id достаточно обратиться к соответствующему свойству window :

Обратите внимание, что это не работает в React и других фреймворках, абстрагирующих работу с DOM , например, с помощью Virtual DOM . Более того, там иногда невозможно обратиться к нативным свойствам и методам window без window .

Миксин ParentNode

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

Такая структура называется коллекцией HTML и представляет собой массивоподобный объект (псевдомассив). Существует еще одна похожая структура — список узлов (NodeList ).

Массивоподобные объекты имеют свойство length с количеством потомков, метод forEach() ( NodeList ), позволяющий перебирать узлы (делать по ним итерацию). Такие объекты позволяют получать элементы по индексу, по названию ( HTMLCollection ) и т.д. Однако, у них отсутствуют методы настоящих массивов, такие как map() , filter() , reduce() и др., что делает работу с ними не очень удобной. Поэтому массивоподобные объекты рекомендуется преобразовывать в массивы с помощью метода Array.from() или spread-оператора:

firstElementChild — первый потомок — элемент
lastElementChild — последний потомок — элемент

Для дальнейших манипуляций нам потребуется периодически создавать новые элементы, поэтому создадим еще одну утилиту:

Наша утилита принимает 4 аргумента: идентификатор, текст, название тега и CSS-класс. 2 аргумента (тег и класс) имеют значения по умолчанию. Функция возвращает готовый к работе элемент. Впоследствии, мы реализуем более универсальный вариант данной утилиты.

prepend(newNode) — добавляет элемент в начало списка
append(newNode) — добавляет элемент в конец списка

Одной из интересных особенностей HTMLCollection является то, что она является "живой", т.е. элементы, возвращаемые по ссылке, и их количество обновляются автоматически. Однако, эту особенность нельзя использовать, например, для автоматического добавления обработчиков событий.

replaceChildren(nodes) — заменяет потомков новыми элементами

Наиболее универсальными способами получения ссылок на элементы являются методы querySelector(selector) и querySelectorAll(selector) . Причем, в отличие от getElementById() , они могут вызываться на любом родительском элементе, а не только на document . В качестве аргумента названным методам передается любой валидный CSS-селектор ( id , class , tag и т.д.):

Создадим универсальную утилиту для получения элементов:

Наша утилита принимает 3 аргумента: CSS-селектор, родительский элемент и индикатор количества элементов (один или все). 2 аргумента (предок и индикатор) имеют значения по умолчанию. Функция возвращает либо один, либо все элементы (в виде обычного массива), совпадающие с селектором, в зависимости от значения индикатора:

Миксин NonDocumentTypeChildNode

Данный миксин предназначен для обработки дочерних узлов, которые не являются документом, т.е. всех узлов, кроме document .

previousElementSibling — предыдущий элемент
nextElementSibling — следующий элемент

Миксин ChildNode

Данный миксин предназначен для обработки дочерних элементов, т.е. элементов, являющихся потомками других элементов.

before(newNode) — вставляет новый элемент перед текущим
after(newNode) — вставляет новый элемент после текущего

replaceWith(newNode) — заменяет текущий элемент новым

Интерфейс Node

Данный интерфейс предназначен для обработки узлов.

parentNode — родительский узел
parentElement — родительский элемент

hasChildNodes() — возвращает true , если элемент имеет хотя бы одного потомка
childNodes — дочерние узлы

firstChild — первый потомок — узел
lastChild — последний потомок — узел

nextSibling — следующий узел
previousSibling — предыдущий узел

textContent — геттер/сеттер для извлечения/записи текста

Для извлечения/записи текста существует еще один (устаревший) геттер/сеттер — innerText .

cloneNode(deep) — копирует узел. Принимает логическое значение, определяющее характер копирования: поверхностное — копируется только сам узел, глубокое — копируется сам узел и все его потомки

isEqualNode(node) — сравнивает узлы
isSameNode(node) — определяет идентичность узлов

contains(node) — возвращает true , если элемент содержит указанный узел

insertBefore(newNode, existingNode) — добавляет новый узел ( newNode ) перед существующим ( existingNode )

appendChild(node) — добавляет узел в конец списка

replaceChild(newNode, existingNode) — заменяет существующий узел ( existingNode ) новым ( newNode ):

removeChild(node) — удаляет указанный дочерний узел

Интерфейс Document

Данный интерфейс предназначен для обработки объекта Document .

getElementsByTagName(tag) — возвращает все элементы с указанным тегом

getElementsByClassName(className) — возвращает все элементы с указанным CSS-классом

createDocumentFragment() — возвращает фрагмент документа:

Фрагменты позволяют избежать создания лишних элементов. Они часто используются при работе с разметкой, скрытой от пользователя с помощью тега template (метод cloneNode() возвращает DocumentFragment ).

createTextNode(data) — создает текст

createComment(data) — создает комментарий

importNode(existingNode, deep) — создает новый узел на основе существующего

createAttribute(attr) — создает указанный атрибут

Интерфейсы NodeIterator и TreeWalker

Интерфейсы NodeIterator и TreeWalker предназначены для обхода (traverse) деревьев узлов. Я не сталкивался с примерами их практического использования, поэтому ограничусь парочкой примеров:

Интерфейс Element

Данный интерфейс предназначен для обработки элементов.

id — геттер/сеттер для идентификатора
className — геттер/сеттер для CSS-класса

classList — все CSS-классы элемента (объект DOMTokenList )

Работа с classList

classList.add(newClass) — добавляет новый класс к существующим
classList.remove(existingClass) — удаляет указанный класс
classList.toggle(className, force?) — удаляет существующий класс или добавляет новый. Если опциональный аргумент force имеет значение true , данный метод только добавляет новый класс при отсутствии, но не удаляет существующий класс (в этом случае toggle() === add() ). Если force имеет значение false , данный метод только удаляет существующий класс при наличии, но не добавляет отсутствующий класс (в этом случае toggle() === remove() )
classList.replace(existingClass, newClass) — заменяет существующий класс ( existingClass ) на новый ( newClass )
classList.contains(className) — возвращает true , если указанный класс обнаружен в списке классов элемента (данный метод идентичен className.includes(className) )

Работа с атрибутами

hasAttributes() — возвращает true , если у элемента имеются какие-либо атрибуты
getAttributesNames() — возвращает названия атрибутов элемента
getAttribute(attrName) — возвращает значение указанного атрибута
setAttribute(name, value) — добавляет указанные атрибут и его значение к элементу
removeAttribute(attrName) — удаляет указанный атрибут
hasAttribute(attrName) — возвращает true при наличии у элемента указанного атрибута
toggleAttribute(name, force) — добавляет новый атрибут при отсутствии или удаляет существующий атрибут. Аргумент force аналогичен одноименному атрибуту classList.toggle()

В использовании перечисленных методов для работы с атрибутами нет особой необходимости, поскольку многие атрибуты являются геттерами/сеттерами, т.е. позволяют извлекать/записывать значения напрямую. Единственным исключением является метод removeAttribute() , поскольку существуют атрибуты без значений: например, если кнопка имеет атрибут disabled , установка значения данного атрибута в false не приведет к снятию блокировки — для этого нужно полностью удалить атрибут disabled с помощью removeAttribute() .

Отдельного упоминания заслуживает атрибут data-* , где символ * означает любую строку. Он предназначен для определения пользовательских атрибутов. Например, в нашей начальной разметке для уникальной идентификации элементов используется атрибут id . Однако, это приводит к загрязнению глобального пространства имен, что чревато коллизиями между нашими переменными и, например, переменными используемой нами библиотеки — когда какой-либо объект библиотеки пытается записаться в свойство window , которое уже занято нашим id .

Вместо этого, мы могли бы использовать атрибут data-id и получать ссылки на элементы с помощью getEl('[data-id="id"]') .

Название data-атрибута после символа - становится одноименным свойством объекта dataset . Например, значение атрибута data-id можно получить через свойство dataset.id .

closest(selectors) — возвращает первый родительский элемент, совпавший с селекторами

matches(selectors) — возвращает true , если элемент совпадает хотя бы с одним селектором

insertAdjacentElement(where, newElement) — универсальный метод для вставки новых элементов перед/в начало/в конец/после текущего элемента. Аргумент where определяет место вставки. Возможные значения:

beforebegin — перед открывающим тегом
afterbegin — после открывающего тега
beforeend — перед закрывающим тегом
afterend — после закрывающего тега

insertAdjacentText(where, data) — универсальный метод для вставки текста

Text — конструктор для создания текста

Comment — конструктор для создания комментария

Объект Document

location — объект с информацией о текущей локации документа

Свойства объекта location :

reload() — перезагружает текущую локацию

replace() — заменяет текущую локацию на новую

title — заголовок документа

head — метаданные документа

body — тело документа

images — псевдомассив ( HTMLCollection ), содержащий все изображения, имеющиеся в документе

links — псевдомассив, содержащий все ссылки, имеющиеся в документе

forms — псевдомассив, содержащий все формы, имеющиеся в документе

Следующие методы и свойство считаются устаревшими:

open() — открывает документ для записи. При этом документ полностью очищается
close() — закрывает документ для записи
write() — записывает данные (текст, разметку) в документ
writeln() — записывает данные в документ с переносом на новую строку
designMode — управление режимом редактирования документа. Возможные значения: on и off . Наберите document.designMode = 'on' в консоли DevTools и нажмите Enter . Вуаля, страница стала редактируемой: можно удалять/добавлять текст, перетаскивать изображения и т.д.
execCommand() — выполняет переданные команды. Со списоком доступных команд можно ознакомиться здесь. Раньше этот метод активно использовался для записи/извлечения данных из буфера обмена (команды copy и paste ). Сейчас для этого используются методы navigator.clipboard.writeText() , navigator.clipboard.readText() и др.

Миксин InnerHTML

Геттер/сеттер innerHTML позволяет извлекать/записывать разметку в элемент. Для подготовки разметки удобно пользоваться шаблонными литералами:

Расширения интерфейса Element

outerHTML — геттер/сеттер для извлечения/записи внешней разметки элемента: то, что возвращает innerHTML + разметка самого элемента

insertAdjacentHTML(where, string) — универсальный метод для вставки разметки в виде строки. Аргумент where аналогичен одноименному аргументу метода insertAdjacentElement()

Метод insertAdjacentHTML() в сочетании с шаблонными литералами и их продвинутой версией — тегированными шаблонными литералами (tagged template literals) предоставляет много интересных возможностей по манипулированию разметкой документа. По сути, данный метод представляет собой движок шаблонов (template engine) на стороне клиента, похожий на Pug , Handlebars и др. серверные движки. С его помощью (при участии History API ) можно, например, реализовать полноценное одностраничное приложение ( Single Page Application или сокращенно SPA ). Разумеется, для этого придется написать чуть больше кода, чем при использовании какого-либо фронтенд-фреймворка.

Вот несколько полезных ссылок, с которых можно начать изучение этих замечательных инструментов:

Иногда требуется создать элемент на основе шаблонной строки. Как это можно сделать? Вот соответствующая утилита:

Существует более экзотический способ создания элемента на основе шаблонной строки. Он предполагает использование конструктора DOMParser() :

Еще более экзотический, но при этом самый короткий способ предполагает использование расширения для объекта Range — метода createContextualFragment() :

В завершение, как и обещал, универсальная утилита для создания элементов:

Заключение

Современный JS предоставляет богатый арсенал методов для работы с DOM . Данных методов вполне достаточно для решения всего спектра задач, возникающих при разработке веб-приложений. Хорошее знание этих методов, а также умение их правильно применять гарантируют не только высокое качество (чистоту) кода, но также избавляют от необходимости использовать DOM-библиотеки (такие как jQuery ), что в совокупности обусловливает производительность приложения, его поддерживаемость и масштабируемость.

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

VDS от Маклауд быстрые и безопасные.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Читайте также: