jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-10 17:42:53 +03:00
parent 631be9c6ad
commit 051b6b43c3
30 changed files with 2603 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md Normal file
View file

@ -0,0 +1,18 @@
Сделаем цикл по узлам `<li>`:
```js
var lis = document.getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
...
}
```
В цикле для каждого `lis[i]` можно получить текст, используя свойство `firstChild`. Ведь первым в `<li>` является как раз текстовый узел, содержащий текст названия.
Также можно получить количество потомков, используя `lis[i].getElementsByTagName('li')`.
Напишите код с этой подсказкой.
Если уж не выйдет -- тогда откройте решение.

66
2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Животные
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
</li>
<li>Рыбы
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
// получить название из текстового узла
var title = lis[i].firstChild.data;
title = title.trim(); // убрать лишние пробелы с концов
// получить количество детей
var childCount = lis[i].getElementsByTagName('li').length;
alert(title + ': ' + childCount);
}
</script>
</body>
</html>

54
2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Животные
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
</li>
<li>Рыбы
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
// .. ваш код ..
</script>
</body>
</html>

14
2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md Normal file
View file

@ -0,0 +1,14 @@
# Дерево
[importance 5]
Есть дерево из тегов `<ul>/<li>`.
Напишите код, который для каждого элемента `<li>` выведет:
<ol>
<li>Текст непосредственно в нём (без подразделов).</li>
<li>Количество вложенных в него элементов `<li>` -- всех, с учётом вложенных.</li>
</ol>
[demo src="solution"]