JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Изменение значения текста элемента
Начнем с самого простого. Многие HTML-элементы могут отображать текст. Примером таких элементов являются заголовки, абзацы, разделы, вводные данные, кнопки и многое другое. У всех них есть одна общая деталь, а именно то, что изменение значения текста вы производите, устанавливая свойство textContent.
Предположим, нужно изменить текст, появляющийся в элементе h1 нашего примера. Следующий фрагмент кода показывает, как это будет выглядеть:
<body>
<h1 id="bigMessage" class="highlight summer">What's happening?</h1>
<script>
let headingElement = document.querySelector("#bigMessage");
headingElement.textContent = "Oppa Gangnam Style!";
</script>
</body>
Если вы внесете эти изменения и снова запустите код, то в браузере вы увидите то, что показано на рис. 26.5.
Рис. 26.5. Изменение значения текста заголовка
Теперь давайте посмотрим, что же конкретно мы сделали, чтобы внести эти изменения. Первым шагом модифицирования любого HTML-элемента в JavaScript будет получение ссылки на него:
let headingElement = document.querySelector("#bigMessage");
Именно здесь появляются наши старые знакомые querySelector и querySelectorAll. Как мы увидим позже, есть и второстепенные способы сослаться на элемент. Тем не менее прямой подход, приведенный здесь, мы будем использовать, когда у вас будет очень конкретное понимание того, на какой элемент или элементы вы хотите нацелиться.
Как только у нас появилась ссылка на элемент, мы можем просто установить в нем свойство textContent:
headingElement.textContent = "Oppa Gangnam Style!";
Чтобы увидеть текущее значение свойства textContent, вы можете считать его, как и любую переменную. Мы также можем установить свойство для изменения текущего значения, как мы сделали это здесь. После выполнения этой строки кода наше оригинальное значение What’s happening? в разметке будет заменено в DOM на то, что установлено в JavaScript.
