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

Чтобы добавить эти вновь созданные элементы в DOM используются методы
i
insertBefore и appendCh l d. Но сначала мы должны будем получить ссылки на ро­
дительский элемент DOM (<div id="content" > ) и его первый дочерний узел.
t
const parent = document . getElementByid ( ' conten ' ) ;
const firstChild = parent . childNodes [ O ] ;
Т е перь можно вставить вновь созданные элементы.

parent . insertBefore (pl , firstChil ) ;
d
parent . appendChild (p ) ;
2
Методу insertBefore передается сам вставляемый элемент и ссылка на узел, пе­
ред которым должна быть выполнена вставка. Метод appendChild очень прост, он
просто добавляет определенный элемент в конец списка узлов данного элемента ( т.е.
создает последний дочерний узел).

Применение стилей к элемента м

API DOM обеспечивают полный контроль над стилями элементов. Однако вместо
изменения свойств индивидуальных элементов хорошей практикой обычно считается
использование классов CSS. Таким образом, если вы хотите изменить стиль элемента,
создайте новый класс CSS, а затем примените его к элементу (или элементам), стиль
которого собираетесь изменить. Используя JavaScript, довольно просто применить су­
ществующий класс CSS к элементу. Например, если нам нужно выделить все абзацы,
в которых содержится слово уникальный, то сначала создадим новый класс CSS .

. highlight {
background : # f fO ;
e
font-styl : italic;

Т е перь можно найти все дескрипторы <р> и, если они содержат слово уникаль­
ный, добавить к ним класс highlight. У каждого элемента есть свойство classList,
которое содержит все имеющиеся у элемента классы (если они есть). У свойства
c l a s s L i s t есть метод add, который позволяет добавлять новые классы. Мы будем
использовать этот пример далее в главе, поэтому поместим его в функцию по имени
highlightParas.
function highlightParas ( containing )
o
g
i f ( type f containing === ' s trin ' )
containing = new RegExp ' \ \Ь$ { containing } \ \Ь ' , ' i ' ) ;
(
const paras = document . getElementsByTagName ( ' p ' ) ;
console . l og (paras ) ;
for l e t р of paras ) {
(
g
if ( ! containin . t est ( p . textContent ) ) continue ;
p . classL s t . a d ( ' highlight ' ) ;
d
i
300 Глава 1 8 . JavaScript в браузере