Раздел: Сайтостроение / JavaScript /

Как получить содержимое элемента в JavaScript

Что такое JavaScript Что такое JavaScript

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

Мы уже умеем находить элементы в HTML-документе. Например, так, как описано здесь. Но что с этим делать дальше? Это уже зависит от ваших потребностей. Например, можно получить содержимое элемента для последующего анализа. Как это можно сделать, описано в этой статье.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Для примера возьмём код, который мы уже рассматривали, когда изучали способы поиска элементов:

<h2>Заголовок</h2>

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
  <li>Элемент списка 4</li>
</ul>   

<script>
<!--

  function FindTag(name) 
  {
    var r = [];    
    var e = document.getElementsByTagName(name);
    
    for (var i = 0; i < e.length; i++)
      r.push(e[i]);
      
    //Возвращает список соответствующих элементов
    return r;
  }

  var str = FindTag('li');
  for (var i = 0; i < str.length; i++)
    document.write(str[i].innerHTML, '<br>');
    
// -->

Здесь для получения содержимого элемента мы используем свойство innerHTML, которое есть у каждого объекта типа HTMLElement. Для работы с содержимым есть и другие свойства. Однако они поддерживаются не всеми браузерами, в отличие от innerHTML.

При чтении из этого свойства вы в формате HTML получаете текст, который представляет дочерние узлы элемента.

Здесь надо обратить внимание на то, что в свойстве innerHTML хранится именно HTML-код, а не просто текст. Например:

<table>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
  </tr>
</table>
                            
<script>
<!--

  var str = document.getElementsByTagName('table');
  document.write('<table>', str[0].innerHTML, '</table><br>');
    
// -->
</script>

Этот код выведет на экран две одинаковых таблицы. Только первая будет выведена статически, а вторая - динамически. А в свойстве innerHTML будет строка:

<tr><td>1-1</td>td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr>

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

<table>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
  </tr>
</table>
                            
<script>
<!--

  var str = document.getElementsByTagName('table');
  var table = str[0].innerHTML;
  var Res = "";
  for (i = 0; i < table.length; i++)
    { 
      if (table.charAt(i) == "<") Res = Res + "<";
      else Res = Res + table.charAt(i);
    }
  
  document.write(Res, '<br>');
    
// -->
</script>

Этот код выведет следующее:

1-1	1-2
2-1	2-2
<tbody><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></tbody>

И это доказывает, что свойство innerHTML содержит именно HTML-код, а не просто текст.

Если же вы хотите получить именно текстовое содержимое (без тегов HTML), то используйте свойство innerText вместо innerHTML.

Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика