Page 296 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017
P. 296
Обратите внимание, что вы можете объединить предков с прямыми потомками. На
пример, body . content > р выберет дескрипторы <р>, которые являются прямыми по
томками элементов класса content, которые являются потомками дескриптора <body>.
Существуют куда более сложные селекторы, но здесь рассматриваются лишь наи
более распространенные. Более подробная информация по этой теме приведена
в части по селекторам в документации MDN ( h t t ps : / d eveloper m ozilla . org/ru/
/
.
do s / Learn/CSS/Introduction _ to _ CSS/Selectors).
c
Ма н и п улирова н и е элемент а м и DOM
Т е перь, когда известно, как обходить, находить и выбирать элементы, возникает
вопрос "Что с ними делать?" Начнем с модификации содержимого. У каждого эле
мента есть два свойства, textContent и innerHTML, которые позволяют получить до
ступ к содержимому элемента и изменить его. Свойство textContent содержит только
"голые" текстовые данные НТМL-дескриптора, а innerHTML позволяет использовать
НТМL-код (что приводит к образованию новых узлов DOM). Давайте рассмотрим, как
можно обратиться к первому абзацу в нашем примере и изменить его.
const paral = document . g etElementsByTagName ( ' p ' ) [ О ] ;
paral . textContent ; / / "Это простой НТМL-файл . "
paral . innerHTML; / / "Это <i>простой</i> НТМL-файл . "
a
л
par l . textContent = "Измененный НТМL-фай " ; / / Посмотрите в браузере,
a
par l . innerHTML = " < i >Измененный</i> НТМL-фай " ; / / что изменилось !
л
Присвоение значений свойствам textContent и innerHTML являет
ся деструктивной операцией: она заменят то, что находится в эле-
-
менте, независимо от его размера или сложности. Например, мож
но заменить сразу все содержимое веб-страницы, изменив свойство
innerHTML элемента <body>!
Созда и е новых элементов DOM
н
Мы уже видели, как можно неявно создать новый узел DOM, изменив значение
свойства innerHTML элемента. Но можно и явно создать новый узел, используя метод
document . createElement. Он создает новый элемент, но не добавляет его в дерево
DOM; вам нужно будет сделать это самостоятельно позже. Давайте создадим два
=
новых элемента абзаца; один станет первым абзацем в блоке <div id " content " > ,
а второй - последним.
const pl = document . createElement ( ' p ' ) ;
const р2 = document . c reateElement ( ' p ' ) ;
pl . t e xtContent "Это было создано динамически ! " ;
p2 . textContent = "И это тоже было создано динамически ! " ;
Манипупирование элементами DOM 299
