Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
nextSibling и previousSibling innerText и innerHTML Свойство onload - Обработчик событий

Свойства textContent, innerText и innerHTML - Доступ и изменение текста и КОДа узла

JavaScript - Практическое применение

Урок №8 innerText и innerHTML

Количество просмотров: 1098

Здесь будут рассмотрены свойства textContent, innerText и innerHTML.

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

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

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

Например, текст можно вывести на экран.

Свойства похожи, но 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>

Пример №1 - Свойства textContent и innerText - Выводим на экран текст узла

Заголовок h1

текст Параграфа

Результат в Javascript:

Заголовок h1 текст Параграфа
Заголовок h1 текст Параграфа

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

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

    Свойства textContent и innerText - Замена текста узла

    Свойства textContent и innerText - Замена текста узла

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

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

    <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>

    Пример №2 - Свойство innerText - Замена текста узла

    Меняем заголовок

    Результат в Javascript:

    Меняем заголовок

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

    • Выбираем по id заголовок h1;
    • При помощи свойства innerText меняем текст в выбранном узле;
    • При этом текст дочернего узла не отображается.

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

Свойство innerHTML - Получение и замена КОДа узла

Свойство innerHTML - Получение и замена КОДа узла

Свойство innerHTML позволяет получить и изменить КОД выбранного узла.

Вернемся к предыдущему примеру и сначала получим и выведем на экран КОД заголовка h1.

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

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

</h1>

 

<script type="text/javascript">

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

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

/* Выводим на экран КОД заголовка и его дочерних элементов */

document.write(any.innerHTML);

</script>

Свойство innerHTML - КОД выбранного узла

Заголовок h1

текст Параграфа

Результат в Javascript:

Заголовок h1

текст Параграфа

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

  • Выбираем по id заголовок h1;
  • При помощи свойства innerHTML выводим на экран заголовок и параграф.

Обратите внимание: при помощи свойств textContent и innerText мы выводили на экран только текст выбранного узла и его дочернего элемента: смотрите - после текста заголовка сразу следует текст параграфа - без разделения на абзацы.

А свойство innerHTML учитывает именно код, как это видно из последнего примера: параграф начинается с новой строки сразу после заголовка. Текст параграфа выделен синим цветом (т.е. учтено и стилевое оформление).

Далее при помощи свойства innerHTML заменим html-код выбранного узла.

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

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

</h1>

 

<script type="text/javascript">

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

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

/* Изменение КОДа выбранного узла на указанный */

document.write(any.innerHTML = "<p style='color:red'>текст Параграфа</p>");

</script>

Свойство innerHTML - Замена КОДа выбранного узла

текст Параграфа

Результат в Javascript:

текст Параграфа

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

  • Здесь мы выбрали заголовок по id и заменили в нем КОД, изменив текст параграфа на красный.
  • При этом начальный текст заголовка не отображается.

На этом заканчивается курс по javascript. Далее будут изучать jQuery. После чего, надеюсь, последует практическое применение полученных знаний.

Из Википедии: jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Главная Изучаем JavaScript innerText и innerHTML Свойство onload - Обработчик событий

Ваши комментарии к уроку:

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

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

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru