Ранее мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов.
Работа с innerHTML.
У нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML.
Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким вот образом:
запишем в него новый текст.
Скрипт будет выглядеть следующим образом:
Таким способом можно записывать не только текст, но и теги и они будут работать (в нашем случае текст станет жирным):
Работа с outerHTML
outerHTML - перезаписывает не только внутренний текст тега, но и сам тег.
Работа с getElementsByTagName
Метод getElementsByTagName получает группу тегов по их имени. Например, можно получить все абзацы p или все заголовки h2.
Необходимо учитывать один нюанс - наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:
Если записать все вышеуказанные теги в переменную, то в elems теперь будет лежать массив свойств. Это значит, что elems[0] - это первый абзац, elems[1] - второй и так далее (нумерация с нуля).
Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = '!' - в этом случае первый абзац сменит свой текст.
Давайте поменяем текст всех трех абзацев:
Для того чтобы поменять все свойства одновременно необходимо массив перебрать через цикл.
Результат выведите самостоятельно.
Свойство document
Некоторые теги страницы можно не получать методами типа getElementById, а обратиться к ним как свойствам объекта document. К примеру, к тегу <body> можно обратиться так: document.body, а к тегу <head> - вот так: document.head. Такое работает не для всех тегов, а только для избранных. Тоже самое работает и с тегом form.