Язык программирования Python, Работа с innerHTML, outerHTML

Предпросмотр материала:

Работа с innerHTML, outerHTML

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

В примере ниже у нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким образом - elem.innerHTML = 'Новый текст' - запишем в него новый текст:

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

Кроме свойства innerHTML существует также свойство outerHTML, которое перезаписывает не только внутренний текст тега, но и сам тег. Смотрите пример:

Как вы видите, наш абзац исчез и заменился на тег b.

Работа с getElementsByTagName

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

Учтите только один нюанс - наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:

В переменной elems теперь лежит массив свойств, это значит, что elems[0] - это первый абзац, elems[1] - второй и так далее (нумерация с нуля).

Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = '!' - в этом случае первый абзац сменит свой текст.

Давайте поменяем текст всех трех абзацев:

Учтите, что менять одновременно все свойства как-нибудь так elems.innerHTML = '!' не получится (потому что elems - массив). Необходимо или вручную перебрать все свойства, как это сделано в примере выше, или воспользоваться циклом.

В следующем примере мы сменим содержимое всех абзацев на страницы на '!', воспользовавшись для этого циклом for:

Язык программирования Python, Работа с innerHTML, outerHTML

Информатика

Другие методич. материалы

DOCX

27.07.2023

365

Информатика

Другие методич. материалы

Файл будет скачан в формате:

DOCX

Автор материала

Ишбулдина Диана Альбертовна

преподаватель

На сайте: 3 года и 9 месяцев
Всего просмотров: 884
Подписчики: 0
Всего материалов: 2

884
просмотров
2
материалов
0
подписчиков

Настоящий материал опубликован пользователем Ишбулдина Диана Альбертовна.
Инфоурок является информационным посредником. Всю ответственность за опубликованные материалы несут пользователи, загрузившие материал на сайт. Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете на материал.