Page 298 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

highlightParas ( ' у никальный ' ) ;
А впоследствии, если мы захотим удалить выделение, мы сможем использовать
i
метод classL s t . remove.
function rernoveParaHighlights ( )
const paras = docurnent . q uerySelectorA l ( ' p . h ighligh ' ) ;
l
t
for ( let р of paras ) {
p . classList . rernove ( ' highlight ' ) ;

При удалении класса h i g h l ight можно многократно исполь­
зовать одну и ту же переменную paras и просто вызвать метод
remove ( h ighli g ht ' ) для каждого элемента абзаца. Однако это не
'
сработает, если элементу еще не был назначен класс. Но вероятнее
всего, удаление нужно будет выполнить в некий более поздний мо­
мент времени, когда, возможно, будут выделены абзацы, добавленные
другим кодом. Поэтому если наше намерение заключается в том, что­
бы снять все, что выделено, использование метода querySelectorAll
является самым надежным способом.

н
Ат и б уты да н ых
р
В HTMLS введены атрибуты данных (data attribute), которые позволяют добав­
лять произвольные данные к НТМL-элементам; браузером эти данные не отобра­
жаются, но они позволяют добавлять к элементам информацию, легко читаемую
и изменяемую с помощью JavaScript. Давайте изменим наш НТМL-код, добавив
кнопки, которые в конечном счете соединим с нашими функциями highlightparas
и removeParaHighlights.
<button data-action="highlight " data-containing="yникaльный">
Выделяет абзацы, содержащие слово "уникальный"
</button>
s
<button data-action="rernoveHighlight " >
Удаляет вьщеление
</button>
a
Назовем наши атрибуты данных action и cont i ns (имена мы выбираем сами),
и используем document . querySelectorAll для поиска всех элементов, имеющих дей­
ствие "highlight ".

Атрибуты данных 301