Далее на странице...
Свойства 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 работает аналогично.
