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

const highlightActions document . querySelectorAll ( ' [ d ata-
action="highlight " ] ' ) ;
Т е м самым мы ввели новый тип селектора CSS. До сих пор мы сталкивались с се­
лекторами, которые соответствовали определенным именам дескрипторов, классов
и идентификаторов. Синтаксис с использованием квадратных скобок позволяет искать
элементы с любым атрибутом". в данном случае - с определенным атрибутом данных.
Поскольку у нас есть только одна кнопка, мы можем использовать метод
querySelector вместо querySelectorAll. Однако последний позволяет нам обраба­
тывать сразу несколько элементов, предназначенных для выполнения одного и того
же действия (что весьма распространено: вспомните о действиях, которые можно
выполнить через меню, ссылку или панель инструментов, и все на той же странице).
Если обратить внимание на один из элементов в highlightActions, то можно заме­
тить, что у него есть свойство dataset.
t
highlightAc i ons [ O ] . d atase t ;
/ / DOМStringMap { containing: "уникальный", action : "highligh t "

Согласно API DOM значения атрибутов данных хранятся в виде
строк (как и предполагалось при реализации класса DOMStringMap).
Таким образом, вы не можете хранить в атрибутах данных объектные
данные. jQuery расширяет функциональные возможности атрибутов
данных, предоставляя интерфейс, который позволяет хранить объек­
1
ты как атрибуты данных, о чем мы узнаем в главе 9 .
Используя JavaScript, можно также изменять или добавлять атрибуты данных. На­
пример, если бы мы хотели выделить абзацы со словом жираф и указать, что регистр
символов имеет значение, то мы могли бы поступить так.

highlightActions [ O ] . d ataset . containing = "жираф" ;
e
highlightActions [ O ] . d ataset . caseSensitive = " t ru " ;

События

В API DOM описано почти 200 событий, и в каждом браузере дополнительно ре­
ализованы свои нестандартные события, поэтому мы, конечно, не будем обсуждать
здесь все события, но рассмотрим то, что о них необходимо знать. Начнем с очень
простого для понимания события c l i c k. Мы будем использовать событие c l i c k
для соединения нашей кнопки "выделения" с нашей функцией highli g htParas.
const highlightActions = document . q uerySelectorAll ( ' [ d ata-
action="highlight" ] ' ) ;
for ( let а of highlightActions ) {
k
a . addEventListener ( ' clic ' , evt => {

302 Глава 1 8 . JavaScript в браузере