«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Свойства textContent и innerText позволяют получить доступ к тексту узла веб-документа и внести в него необходимые изменения. Рассмотрим их подробнее.



textContent и innerText - Доступ к тексту узла

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

Текст, например, можно вывести на экран или использовать его как-то иначе.

Свойства похожи, но innerText не работает в ранних версиях Firefox.

Фрагмент кода

<h1 id="name"> Заголовок h1

<p style="color:#03C">текст Параграфа</p>

</h1>

 

<script type="text/javascript">

document.write("Результат в Javascript: <p>");

var any = document.getElementById('name'); /* Выбираем тег h1 по id */

/* Далее получаем доступ и выводим на экран текст тега h1 и текст его дочернего узла - параграфа - тег p */

document.write(any.innerText + "<br />");

document.write(any.textContent + "<br />");

</script>

Результат

Комментарии к примеру.

  • Выбираем по id заголовок h1;

  • Поочередно при помощи свойств innerText и textContent выводим на экран текст заголовка;

  • При этом свойства возвращают текст параграфа (тег </p>), так как он является дочерним узлом по отношению к h1.

textContent и innerText - Замена текста узла

Свойства innerText и textContent не только возвращают, но и позволяют заменить текст выбранного узла.

При замене текста основного узла, текст дочерних узлов не будет отображаться на веб-странице.

Фрагмент кода

<h1 id="name"> Заголовок h1

<p style="color:#03C">текст Параграфа</p>

</h1>

 

<script type="text/javascript">

document.write("Результат в Javascript: <p>");

var any = document.getElementById('name');/* Выбираем тег h1 по id */

/* Изменение текста выбранного узла на указанный */

document.write(any.innerText = "Меняем заголовок");

</script>

Результат

Комментарии к примеру.

  • Выбираем по id заголовок h1;

  • При помощи свойства innerText меняем текст в выбранном узле;

  • При этом текст дочернего узла не отображается.

Свойство textContent работает аналогично.

Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


JavaScript и Web

Тематические публикации
Популярные заметки
Последние заметки