Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / 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 с нуля до гуру >>>