Удалить класс из всех элементов, кроме активного элемента

Пример DOM

Начнём с такого, простого, документа:

DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит:

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

Каждый узел этого дерева – это объект.

Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: – это корневой узел, и его дочерние узлы и т.д.

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

Например, в теге есть текстовый узел .

Обратите внимание на специальные символы в текстовых узлах:

• перевод строки: (в JavaScript он обозначается как )
• пробел:

Пробелы и переводы строки – это полноправные символы, как буквы и цифры. Они образуют текстовые узлы и становятся частью дерева DOM. Так, в примере выше в теге есть несколько пробелов перед , которые образуют текстовый узел (он содержит в себе только перенос строки и несколько пробелов).

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

1. По историческим причинам пробелы и перевод строки перед тегом игнорируются
2. Если мы записываем что-либо после закрывающего тега , браузер автоматически перемещает эту запись в конец , поскольку спецификация HTML требует, чтобы всё содержимое было внутри . Поэтому после закрывающего тега не может быть никаких пробелов.

В остальных случаях всё просто – если в документе есть пробелы (или любые другие символы), они становятся текстовыми узлами дерева DOM, и если мы их удалим, то в DOM их тоже не будет.

Здесь пробельных текстовых узлов нет:

Пробелы по краям строк и пробельные текстовые узлы скрыты в инструментах разработки

Когда мы работаем с деревом DOM, используя инструменты разработчика в браузере (которые мы рассмотрим позже), пробелы в начале/конце текста и пустые текстовые узлы (переносы строк) между тегами обычно не отображаются.

Таким образом инструменты разработки экономят место на экране.

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

DocumentFragment

является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, ниже генерирует фрагмент с элементами , которые позже вставляются в :

Обратите внимание, что на последней строке с мы добавляем , но он «исчезает», поэтому структура будет:

редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

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

Автоисправление

Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.

Например, в начале документа всегда должен быть тег . Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега .

Например, если HTML-файл состоит из единственного слова , браузер обернёт его в теги и , добавит необходимый тег , и DOM будет выглядеть так:

При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

Есть такой документ с незакрытыми тегами:

…Но DOM будет нормальным, потому что браузер сам закроет теги и восстановит отсутствующие детали:

Таблицы всегда содержат

Важный «особый случай» – работа с таблицами. По стандарту DOM у них должен быть , но в HTML их можно написать (официально) без него. В этом случае браузер добавляет в DOM самостоятельно.

Для такого HTML:

DOM-структура будет такой:

Видите? Из пустоты появился , как будто документ и был таким

Важно знать об этом, иначе при работе с таблицами возможны сюрпризы

DocumentFragment

– это облегчённая версия . Он используется в качестве обёртки для временного хранения HTML элементов.

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

в основном используется, когда необходимо вставить множество элементов на страницу, а также для элемента .

Например, переместим все четные в новый :

<ul id="source-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul id="target-list"></ul>

<script>
  const $evenLi = document.querySelectorAll('#source-list li:nth-child(even)');
  // создадим пустой фрагмент
  let $fragment = new DocumentFragment();
  $evenLi.forEach(($li) => {
    // добавим в фрагмент элемент $li
    $fragment.appendChild($li);
  });
  // вставим фрагмент в #target-list
  document.querySelector('#target-list').appendChild($fragment);
</script>

Ещё один пример, в котором добавим в десять :

<ul id="list"></ul>

<script>
  const $list = document.querySelector('#list');
  // создадим пустой фрагмент
  let $fragment = new DocumentFragment();
  for(let i = 0; i < 10; i++) {
    const $li = document.createElement('li');
    $li.textContent = 'item-' + i;
    // добавим в фрагмент элемент $li
    $fragment.appendChild($li);
  }
  // вставим фрагмент в #target-list
  document.querySelector('#list').append($fragment);
</script>

Использование в подобных сценариях может значительно ускорить ваш сайт. Т.к. изменение DOM — это очень затратная операция. А с помощью это можно сделать всего за одну операцию.

не является частью видимой DOM. Изменения, внесенные во фрагмент, не влияют на документ и производительность страницы.

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

Например, перепишем первый пример с использованием :

<ul id="source-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul id="target-list"></ul>

<script>
  const $evenLi = document.querySelectorAll('#source-list li:nth-child(even)');
  // создадим пустой массив
  let $list = [];
  $evenLi.forEach(($li) => {
    // добавим в массив $target элемент $li
    $list.appendChild($li);
  });
  // вставим массив элементов в #target-list
  document.querySelector('#target-list').append(...$list);
</script>

Устаревшие методы вставки/удаления

Старая школа

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

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

Сейчас уже нет причин их использовать, так как современные методы , , , , , более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет в конец дочерних элементов .

Следующий пример добавляет новый в конец :

Вставляет перед в .

Следующий пример вставляет новый элемент перед вторым :

Чтобы вставить в начало, мы можем сделать вот так:

Заменяет на среди дочерних элементов .

Удаляет из (предполагается, что он родитель ).

Этот пример удалит первый из :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, вернёт . Но обычно возвращаемое значение не используют, просто вызывают метод.

4 | Вы не чувствуете удовлетворения после решения проблемы.

Если вы не испытываете радости и чувства выполненного долга после решения проблемы, вы никогда не станете успешным программистом.

Отсутствие “позитива” после успешного решения проблемы относится к предыдущему признаку — быстрому отказу от поиска решения. Когда устранения багов и недочетов становится бесконечной рутиной, вы забываете об удовольствии, которые приходит при решении проблемы.

Когда вы находите решение, вы получаете необходимую дозу дофамина. Это похоже на эмоции, которые вы испытываете, проходя уровень в видеоигре, или решая судоку или кроссворд. Мы все знаем, что если после долгого и сложного решения задачи, вы все-таки одерживаете верх, то испытываете положительные эмоции. Но если вы больше их не испытываете, или вообще никогда не придавали этому значения, вы не испытаете удовольствия от программирования. Если программирование для вас — скучная работа, где вам просто нужно достичь результата легчайшим способом, вы никогда не станете действительно успешным программистом.

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

Примеры клиентоориентированности

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

Nordstrom и возврат чужих шин

В 1975 году мужчина купил зимние шины в шиномонтажной мастерской, но спустя несколько недель обнаружил дефект и решил их вернуть. Когда он подъехал к предполагаемой мастерской, обнаружил, что она закрыта, а на ее месте стоит магазин Nordstrom. Компания продавала обувь, модную одежду и товары для дома. Тем не менее мужчина не растерялся и объяснил ситуацию продавцу, а тот — принял его шины и вернул деньги .

Справочник сотрудников Nordstrom

Вывод. Возврат дорогого товара, который нельзя перепродать, выглядит абсурдно. Но если пренебречь небольшим финансовым ударом, в долгосрочной перспективе ситуация оказалась выгодной. Спустя полвека люди продолжают рассказывать эту историю, а если загуглить Nordstrom tires, вы найдете около 3 млн результатов. Теперь поведение продавца выглядит мудро, четко по методичке компании , в которой всего одно правило: «Используй здравый смысл в любой ситуации».

Эта история скорее исключение, чем правило. Регулярная работа в минус разорит компанию, но закладывая небольшой бюджет на подобную блажь для клиентов, действительно можно получить хороший PR-эффект. Особенно, если строить бренд вокруг сильного сервиса. Nordstrom регулярно получает один из наивысших уровней потребительской лояльности (NPS) . По этому показателю компания даже обогнала Apple в 2018 году.

Экономика инноваций

Кризис капитализма: какие бизнес-практики придут на смену старым моделям

Casper и чат-бот для людей с бессонницей

Производитель матрасов Casper создал чат-бота , с которым можно поболтать бессонной ночью. Глава отдела коммуникаций Casper Линдси Каплан объясняет: «Мы хотели сделать бота, который делает 3 часа ночи не такими одинокими». Insomnobot 3000 шутит и поддерживает любимые темы людей с бессонницей: стресс, кофе и сериалы. Бот бесплатный, но помогает компании собирать номера телефонов клиентов, чтобы отправлять рекламные материалы.

Вывод. Casper — одна из немногих компаний, которая использовала чат-бот с измеримой пользой в виде PR-эффекта и сбора базы теплых контактов. Для этого достаточно приправить заботу о целевой аудитории актуальным трендом.

The Ritz-Carlton и проблема на $2 000

Международная сеть гостиниц The Ritz-Carlton разрешает сотрудникам потратить до $2 тыс., чтобы решить любые проблемы гостя без лишних вопросов .

Например, один из клиентов забыл в гостинице зарядное устройство. Он обнаружил пропажу на следующий день, но не успел позвонить в отель, потому что получил посылку. Это был небольшой пакет с запиской: «Мистер Джулиус, я хотел убедиться, что вы получили посылку. Уверен, вам это нужно, и на всякий случай я отправил вам дополнительное зарядное устройство для ноутбука».

Вывод. Ошибка клиента — возможность впечатлить его продуманностью сервиса.

Так можно придумать бюджетные варианты решения проблем, которые возникают из-за неосмотрительности клиентов. Такие решения дают конкурентное преимущество и производят wow-эффект.

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body.

Для этого есть метод append, в нашем случае: document.body.append(div).

Вот полный пример:

Вот методы для различных вариантов вставки:

• node.append(…nodes or strings) – добавляет узлы или строки в конец node,
• node.prepend(…nodes or strings) – вставляет узлы или строки в начало node,
• node.before(…nodes or strings) –- вставляет узлы или строки до node,
• node.after(…nodes or strings) –- вставляет узлы или строки после node,
• node.replaceWith(…nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

<ol id=”ol”> <li>0</li> <li>1</li> <li>2</li></ol><script> ol.before(‘before’); // вставить строку “before” перед <ol> ol.after(‘after’); // вставить строку “after” после <ol> let liFirst = document.createElement(‘li’); liFirst.innerHTML = ‘prepend’; ol.prepend(liFirst); // вставить liFirst в начало <ol> let liLast = document.createElement(‘li’); liLast.innerHTML = ‘append’; ol.append(liLast); // вставить liLast в конец <ol></script>

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

before<ol id=”ol”> <li>prepend</li> <li>0</li> <li>1</li> <li>2</li> <li>append</li></ol>after

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

<div id=”div”></div><script> div.before(‘<p>Привет</p>’, document.createElement(‘hr’));</script>

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

&lt;p&gt;Привет&lt;/p&gt;<hr><div id=”div”></div>

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

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML?

Как писать тексты для интерфейсов

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

Понятно

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

Удаление узлов

Удалить узел из DOM можно в JavaScript с помощью методов (считается устаревшим) и .

removeChild

Синтаксис :

parent.removeChild(node)

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

Например, удалим второй в :

<ol id="devices">
  <li>Смартфон</li>
  <li>Планшет</li>
  <li>Ноутбук</li>
</ol>

<script>
const $liSecond = document.querySelector('#devices li:nth-child(2)');
// вызываем у родительского элемента метод removeChild и передаём ему в качестве аргумента узел который нужно удалить
$liSecond.parentNode.removeChild($liSecond);
</script>

В качестве результата метод возвращает удалённый узел.

Например, удалим элемент, а затем вставим его в другое место:

<div id="message-1">
  <p>...</p>
</div>

<div id="message-2"></div>

<script>
  const $p = document.querySelector('#message-1>p');
  // удалим элемент p
  const result = $p.parentElement.removeChild($p);
  // вставим удалённый элемент p в #message-2
  document.querySelector('#message-2').append(result);
</script>

remove

Ещё один способ удалить узел – это использовать метод .

Синтаксис :

node.remove()

Например, удалим элемент при нажатии на него:

<button>Кнопка</button>

<script>
document.querySelector('button').onclick = function() {
  // удалим элемент
  this.remove();
}
</script>

Когда мы вставляем элементы, они удаляются со старых мест.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write.

Синтаксис:

<p>Где-то на странице…</p><script> document.write(‘<b>Привет из JS</b>’);</script><p>Конец</p>

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Например:

<p>Через одну секунду содержимое этой страницы будет заменено…</p><script> // document.write через 1 секунду // вызов происходит после того, как страница загрузится, поэтому метод затирает содержимое setTimeout(() => document.write(‘<b>…Этим.</b>’), 1000);</script>

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

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

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Что такое тексты для интерфейсов и чем они отличаются от обычных текстов

Чтобы любой человек без знания двоичного кода мог взаимодействовать с компьютерными программами, приложениями на смартфоне и различными интернет-сервисами, необходимы простые и понятные инструменты. Набор этих инструментов называется интерфейсом, от английского interface — «между лицами».

Кнопки, подсказки, сообщения об ошибках, оповещения и прочее — это и есть основные элементы, благодаря которым мы можем давать программам, приложениям и сервисам команды и получать от них какую-то информацию в ответ. И каждый из этих элементов нуждается в простом и чётком текстовом описании.

Проведём эксперимент. Посмотрите на интерфейс интернет-сервиса без текста и попробуйте понять, что это за сервис и как он работает

Без текста можно узнать кнопку или поле для ввода какой-то информации, но понять, что они делают и для чего нужны, сложно

В каких элементах интерфейса не обойтись без текста:

 Заголовки и подзаголовки — помогают пользователю быстро ориентироваться и понимать, о чём на странице идёт речь. Они должны быть не слишком длинными, но ёмкими и понятными.

 Кнопки — помогают пользователю совершить действие. Как правило, кнопки визуально выделяются на странице, а текст на них описывает действие, которое случится после нажатия: «Установить», «Оплатить», «Отправить отзыв», «Отменить оплату» и прочее. 

 Оповещения — короткие и информативные сообщения, которые не должны раздражать пользователя.

 Уведомления об ошибках — разновидность оповещений. Сообщения, которые рассказывают пользователю, что и почему пошло не так при его работе с сервисом, сайтом или приложением. Такие уведомления должны кратко и понятным языком объяснять, что случилось и что можно сделать, чтобы исправить ситуацию.

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

Коллекции – не массивы

DOM-коллекции, такие как и другие, которые мы увидим далее, не являются JavaScript-массивами.

В них нет методов массивов, таких как , , , и других.

Именно поэтому и называют «коллекция» или «псевдомассив».

Можно для перебора коллекции использовать обычный цикл Но что делать, если уж очень хочется воспользоваться методами массива?

Это возможно, основных варианта два:

1. Применить метод массива через :

2. При помощи Array.prototype.slice сделать из коллекции массив.

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

   Это работает и для коллекции:

Нельзя перебирать коллекцию через

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

Коллекции – наглядный пример, почему нельзя. Они похожи на массивы, но у них есть свои свойства и методы, которых в массивах нет.

К примеру, код ниже должен перебрать все дочерние элементы . Их, естественно, два: и . Максимум, три, если взять ещё и текст между ними.

Но в примере ниже сработает не три, а целых 5 раз!

Цикл выведет не только ожидаемые индексы , , , по которым лежат узлы в коллекции, но и свойство (в коллекции оно enumerable), а также функцию – она никогда не используется, возвращает элемент коллекции, проще обратиться по индексу .

В реальном коде нам нужны только элементы, мы же будем работать с ними, а служебные свойства – не нужны. Поэтому желательно использовать .

7 | Вы не можете думать самостоятельно

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

Проявление инициативы или какие-либо ошибки кажутся вам рискованными

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

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

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

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

Зачем нужны UX-писатели и почему это перспективное направление

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

По запросу «ux-копирайтер» на hh.ru в июне 2020 года есть всего одна вакансия, и ещё две по запросу «ux-writer»
Чуть больше вакансий, уже 5, появляются по запросу «ux-писатель»
И 6 вакансий можно найти по запросу «ux-редактор»

При этом в крупных компаниях UX-писатели уже есть или начинают появляться, но называют их там иначе — просто копирайтерами, редакторами, техническими писателями или как-то ещё. Например, в Яндексе специалист, который занимается интерфейсными текстами, может называться редактором-копирайтером:

Синтаксис

где результат вычисления выражения должен быть ссылкой на свойство (объекта), например:

delete object.property
delete object
delete object
delete property // удаляет свойства глобального объекта, или,
                // используя инструкцию with, свойства объекта, на который ссылается инструкция

Если результат вычисления выражения не является свойством (объекта), ничего не делает.

Имя объекта или выражение, результатом вычисления которого является объект.

Удаляемое свойство.

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

Возвращает false, только если свойство существует в самом объекте, а не в его прототипах, и не может быть удалено. Во всех остальных случаях возвращает true.

Изменение классов

В работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как можно работать с атрибутом класса в JavaScript, используя и .

— получает или задает значение класса.

—добавляет значения классов.

— отобразить/скрыть класс.

— проверяет, существует ли определенное значение.

— заменяет старое значение на новое.

— удаляет значение.

В следующем примере поработаем с каждым из этих методов:

<!DOCTYPE html><html lang="en"><style>    .active {        border: 5px solid green;    }    .alert {        border: 5px solid red;    }    .hidden {        display: none;    }    div {        border: 5px solid lightgrey;        padding: 15px;        margin: 5px;    }</style><body>    <div>Div #1</div>    <div class="active">Div #2</div></body></html>

Начальный выводимый результат:

Используем , чтобы применить значение к классам:

// Выбрать div #1const div = document.querySelector('div');// Класс alert назначить div #1div.className = 'alert';

Теперь класс , определенный в HTML, назначен первому :

Это изменит любые существующие классы элемента. Можно добавлять несколько классов, используя , если разделять имена классов пробелами.

Другой способ изменять классы — использование свойства , у которого есть несколько полезных методов:

// Выбрать div #2 const activeDiv = document.querySelector('.active');// Добавить класс hiddenactiveDiv.classList.add('hidden');   // Удалить класс hiddenactiveDiv.classList.remove('hidden'); // Переключаться между hidden true и falseactiveDiv.classList.toggle('hidden');// Заменить класс active на класс alertactiveDiv.classList.replace('active', 'alert');

После запуска всех этих методов, наш HTML отобразится так:

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

Создание и добавление элементов

Чтобы создать новый элемент — используется метод .

var newDiv = document.createElement('div')

Тут же можно и проставить свойства и содержание созданному элементу.

var newDiv = document.createElement('div')
newDiv.className = 'my-class'
newDiv.id = 'my-id'
newDiv.style.backgroundColor = 'red'

newDiv.innerHTML = 'Привет, мир!'

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

Код из следующего примера добавляет новые элементы к списку:

<ul id="list">
<li>Первый элемент</li>
</ul>

Список:

Первый элемент

// элемент-список UL
var list = document.getElementById('list')

// новый элемент
var li = document.createElement('LI')
li.innerHTML = 'Новый элемент списка'

// добавление в конец
list.appendChild(li)

Метод всегда добавляет элемент последним в список детей.

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

Он работает так же, как и , но принимает вторым параметром элемент, перед которым нужно вставлять.

parentElem.insertBefore(newElem, target)

Например, в том же списке добавим элементы перед первым .

<ul id="list2">
<li>Первый элемент</li>
</ul>

Первый элемент

// родительский элемент UL
var list = document.getElementById('list2')
// элемент для вставки перед ним (первый LI)
var firstLi = list.getElementsByTagName('LI')

// новый элемент
var newListElem = document.createElement('LI')
newListElem.innerHTML = 'Новый элемент списка'

// вставка
list.insertBefore(newListElem, firstLi)

Метод позволяет вставлять элемент в любое место, кроме как в конец. А с этим справляется . Так что эти методы дополняют друг друга.

Метода нет, но нужную функцию легко написать на основе комбинации и .

Чтобы убрать узел из документа — достаточно вызвать метод из его родителя.

list.removeChild(elem)

Если родителя нет «на руках», то обычно используют . Получается так:

elem.parentNode.removeChild(elem)

Неуклюже, но работает.

Что такое клиентоориентированность

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

Это альтернатива продуктовым подходам «Продать можно все» и «Хороший товар найдет покупателя». Опираясь на них, компания сначала создает продукт, а уже потом думает, кому его продать, чтобы увеличить продажи. В клиентоориентированном подходе стартовая точка размышлений — желания клиента.

Перевернуть маркетинговую логику предложил экономист Питер Друкер . «Клиент определяет бизнес», — писал он в книге «Практика менеджмента» еще в 1954 году

Не так важно, что компания считает ценностью товара, главное — за что платит клиент. Предназначение бизнеса — соответствовать его запросам

«Наша задача — дать вам то, что удовлетворит желания, о которых вы не подозревали. После чего представить свою жизнь без этого станет невозможно», — CEO Apple Тим Кук .

Владельцам бизнеса бывает трудно провести грань между клиентоориентированностью и выполнением «хотелок» клиента. Главное правило — не нужно ориентировать бизнес на чужих клиентов. Различить здоровую и патологическую клиентоориентированность поможет вопрос: «Кто не наш клиент?» Например, бренду люксовой парфюмерии не стоит реагировать на просьбы провести розыгрыш продукта за репост в соцсетях, а веганскому ресторану — расширять ассортимент по просьбе любителей мяса.

Клиент всегда прав, если это ваш клиент. Нужно исполнять желания тех, кто четко подпадает под целевую аудиторию и, вероятно, принесет прибыль в долгосрочной перспективе.

Согласно статистике Gartner , 80% прибыли компании генерирует 20% клиентов — на них и стоит сконцентрироваться. Угождать им выгодно — по данным консалтинговой компании Invesp , привлечение новых клиентов обходится в пять раз дороже, чем удержание старых. А сохранение 5% клиентов может увеличить прибыль до 95%.

Индустрия 4.0

Глава Apple Тим Кук: «Вы больше не клиент. Вы — продукт»

Клиентоориентированными могут быть не только бизнесы, но и люди. Это один из самых важных гибких навыков (soft skills). Просто перенесите принципы подхода на свои отношения коллегами, работодателями, друзьями и знакомыми.

Например, если меняете работу, проанализируйте свою целевую аудиторию. Это будут HR, руководители отделов и директора. Подумайте, какие проблемы с соискателями у них бывают, как вы можете их решить. Изучайте аудитории разных сфер вашей жизни, помогайте удовлетворять запросы и закрывать проблемы этих людей.

Что в итоге

Текст в интерфейсе так же важен, как и дизайн. Чем раньше он появляется в макетах и прототипах, тем выше шансы проекта на успех у пользователей.

UX-писатель — это специалист, который занимается интерфейсными текстами. В каждой конкретной компании он может называться по-своему, но это не влияет на суть его работы — наравне с дизайнерами, менеджерами, маркетологами и программистами делать продукт понятным и полезным.

UX-писателю важно самому хорошо разбираться в том, как работает сайт, программа, приложение или сервис, знать особенности разных элементов интерфейса, уметь писать просто, коротко и в мире пользователя, проводить тестирования и работать в команде. При этом на самом деле без правильных текстов интерфейс не развалится — сайты и приложения всё равно будут работать, а заинтересованные пользователи найдут способ понять, как ими пользоваться

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

При этом на самом деле без правильных текстов интерфейс не развалится — сайты и приложения всё равно будут работать, а заинтересованные пользователи найдут способ понять, как ими пользоваться. Но UX-копирайтинг помогает уже работающему продукту быть лучше и проявлять заботу о своих пользователях даже в таких мелочах, как названия кнопок и пунктов меню.