Skip to content

Commit 051b6b4

Browse files
iliakaniliakan
committed
renovations
1 parent 631be9c commit 051b6b4

File tree

30 files changed

+2603
-0
lines changed

30 files changed

+2603
-0
lines changed

‎2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Сделаем цикл по узлам `<li>`:
2+
3+
```js
4+
var lis = document.getElementsByTagName('li');
5+
6+
for (i = 0; i < lis.length; i++) {
7+
...
8+
}
9+
```
10+
11+
В цикле для каждого `lis[i]` можно получить текст, используя свойство `firstChild`. Ведь первым в `<li>` является как раз текстовый узел, содержащий текст названия.
12+
13+
Также можно получить количество потомков, используя `lis[i].getElementsByTagName('li')`.
14+
15+
Напишите код с этой подсказкой.
16+
17+
Если уж не выйдет -- тогда откройте решение.
18+

‎2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
</head>
7+
8+
<body>
9+
10+
<ul>
11+
<li>Животные
12+
<ul>
13+
<li>Млекопитающие
14+
<ul>
15+
<li>Коровы</li>
16+
<li>Ослы</li>
17+
<li>Собаки</li>
18+
<li>Тигры</li>
19+
</ul>
20+
</li>
21+
<li>Другие
22+
<ul>
23+
<li>Змеи</li>
24+
<li>Птицы</li>
25+
<li>Ящерицы</li>
26+
</ul>
27+
</li>
28+
</ul>
29+
</li>
30+
<li>Рыбы
31+
<ul>
32+
<li>Аквариумные
33+
<ul>
34+
<li>Гуппи</li>
35+
<li>Скалярии</li>
36+
</ul>
37+
38+
</li>
39+
<li>Морские
40+
<ul>
41+
<li>Морская форель</li>
42+
</ul>
43+
</li>
44+
</ul>
45+
</li>
46+
</ul>
47+
48+
<script>
49+
var lis = document.getElementsByTagName('li');
50+
51+
for (i = 0; i < lis.length; i++) {
52+
// получить название из текстового узла
53+
var title = lis[i].firstChild.data;
54+
55+
title = title.trim(); // убрать лишние пробелы с концов
56+
57+
// получить количество детей
58+
var childCount = lis[i].getElementsByTagName('li').length;
59+
60+
alert(title + ': ' + childCount);
61+
}
62+
</script>
63+
64+
</body>
65+
66+
</html>

‎2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
</head>
7+
8+
<body>
9+
10+
<ul>
11+
<li>Животные
12+
<ul>
13+
<li>Млекопитающие
14+
<ul>
15+
<li>Коровы</li>
16+
<li>Ослы</li>
17+
<li>Собаки</li>
18+
<li>Тигры</li>
19+
</ul>
20+
</li>
21+
<li>Другие
22+
<ul>
23+
<li>Змеи</li>
24+
<li>Птицы</li>
25+
<li>Ящерицы</li>
26+
</ul>
27+
</li>
28+
</ul>
29+
</li>
30+
<li>Рыбы
31+
<ul>
32+
<li>Аквариумные
33+
<ul>
34+
<li>Гуппи</li>
35+
<li>Скалярии</li>
36+
</ul>
37+
38+
</li>
39+
<li>Морские
40+
<ul>
41+
<li>Морская форель</li>
42+
</ul>
43+
</li>
44+
</ul>
45+
</li>
46+
</ul>
47+
48+
<script>
49+
// .. ваш код ..
50+
</script>
51+
52+
</body>
53+
54+
</html>

‎2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Дерево
2+
3+
[importance 5]
4+
5+
Есть дерево из тегов `<ul>/<li>`.
6+
7+
Напишите код, который для каждого элемента `<li>` выведет:
8+
<ol>
9+
<li>Текст непосредственно в нём (без подразделов).</li>
10+
<li>Количество вложенных в него элементов `<li>` -- всех, с учётом вложенных.</li>
11+
</ol>
12+
13+
[demo src="solution"]
14+

‎6-optimize/1-optimize-intro/article.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Введение
2+
3+
В отличие от ряда других курсов учебника, этот раздел -- не является курсом как таковым. Связное и грамотное изложение темы требует времени, которое я пока не могу ему уделить. Но, надеюсь, смогу в будущем.
4+
5+
Пока что раздел содержит лишь некоторые статьи-заметки по теме оптимизации, которые, надеюсь, будут вам полезны.

0 commit comments

Comments
 (0)