Объект document в JavaScript. Методы и свойства объекта document. Часть 3

Объект document в JavaScript. Методы и свойства объекта document

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомство с объектом document в JavaScript, а также с его методами и свойствами, позволяющими выбирать элементы верстки в документе и манипулировать выбранными элементами.

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

Первое полезное свойство, которое вы можете использовать часто на практике — свойство innerHTML. innerHTML позволяет получить содержимое элемента или же перезаписать его. Чтобы было понятнее, приведем пример. Так мы получим содержимое заголовка H1:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Объект document в JavaScript. Методы и свойства объекта document

Или получим содержимое всего блока:

Объект document в JavaScript. Методы и свойства объекта document

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Объект document в JavaScript. Методы и свойства объекта document

Как видим, мы полностью переписали содержимое блока, добавив с помощью свойства innerHTML новый заголовок и параграф.

Давайте познакомимся с еще одним свойством — textContent. Если innerHTML получает все содержимое элемента, включая теги и контент, то свойство textContent позволяет получить лишь контент, без тегов. Проверим:

Объект document в JavaScript. Методы и свойства объекта document

Как и ожидалось, все теги были вырезаны и мы получили чистый контент блока. Ну и, само собой, мы можем перезаписать текст элемента, присвоив свойству textContent элемента новое значение:

Объект document в JavaScript. Методы и свойства объекта document

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree