Длина коллекции после удаления элементов
важность: 5
Вот небольшой документ:
<ul id="menu">
<li>Главная страница</li>
<li>Форум</li>
<li>Магазин</li>
</ul>
- Что выведет следующий код (простой вопрос)?
var lis = document.body.getElementsByTagName('li');
document.body.innerHTML = "";
alert( lis.length );
- А такой код (вопрос посложнее)?
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
document.body.innerHTML = "";
alert( lis.length );
Ответ на первый вопрос
Ответ: 0, пустая коллекция.
<ul id="menu">
<li>Главная страница</li>
<li>Форум</li>
<li>Магазин</li>
</ul>
<script>
var lis = document.body.getElementsByTagName('li');
document.body.innerHTML = "";
alert( lis.length );
</script>
Это потому, что все элементы из BODY
удаляются, а коллекция – живая.
Ответ на второй вопрос
Ответ на второй вопрос зависит от браузера. В большинстве браузеров будет 3, коллекция не изменилась, так как она теперь привязана не к BODY
, а к элементу, на котором идёт поиск, т.е. к menu
.
Но элемент menu
находится в переменной, и поэтому должен быть жив, а значит и его дети тоже. Но некоторые браузеры (IE10) используют агрессивный подход при работе с памятью и очищают все элементы, кроме тех, которые непосредственно хранятся в переменных.
Поэтому результат кода ниже в большинстве браузеров: 3
, а в IE10: 0
.
<ul id="menu">
<li>Главная страница</li>
<li>Форум</li>
<li>Магазин</li>
</ul>
<script>
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
document.body.innerHTML = "";
alert( lis.length );
</script>