Javascript.RU

Списки узлов DOM. Динамика в примере.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/searching-elements-internals.

При поиске элементов в DOM надо помнить одну простую вещь: все списки узлов - не массивы Array, а специальные динамичные сущности DOMNodeList.

Какое это имеет значение? Разберем на примере.

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

function removeChildren(node) {
    var children = node.childNodes

    for(var i=0;i<children.length; i++) {
        var child = children[i]
        
        node.removeChild(child)
    }
}

Проверим работу функции на тестовом списке.

  1. Саша
  2. Маша
  3. Паша
  4. Даша

С одного нажатия все узлы удалить не получится. Проверьте. Почему?

Причина в том, что childNodes всегда содержит упорядоченный список текущих детей.

При работе функции removeChildren сначала удаляется первый элемент списка, children[0] (Саша). Если посмотреть на children после удаления, то обнаружится интересная картина:

Было:

  1. [0] Саша
  2. [1] Маша
  3. [2] Паша
  4. [3] Даша

Сашу удалили. Стало:

  1. [0] Маша
  2. [1] Паша
  3. [2] Даша

Список DOM-узлов по-прежнему начинается с 0, а функция продолжает удалять с children[1], так что Маша остается на месте:

  1. [0] Маша
  2. [1] Даша

Свойство length, как и сам список, отражает текущую картину вещей, поэтму цикл не идет дальше i=2 и заканчивает свою работу, удалив ровно половину элементов.

Как сделать правильно работающую функцию?

Вот один из вариантов:

function removeChildren(node) {
    var children = node.childNodes

    while(children.length) {
        node.removeChild(children[0])
    }
}

Общий принцип такой: если вам нужно производить изменения с набором DOM-узлов - имейте в виду, что все ваши изменения отражаются в DOM не после окончания работы скрипта, а сразу же.


Автор: tenshi, дата: 9 апреля, 2008 - 11:34
#permalink
while( child= element.firstChild ) element.removeChild( child )
element.innerHTML= ''

а вообще, я предпочитаю насильно приводить списки узлов к типу Array, что позволяет использовать соответствующие методы для работы с массивами.

.ня


Автор: all87 (не зарегистрирован), дата: 14 июля, 2010 - 02:22
#permalink

innertHTML = '' сделает Вам каку если понадобится где либо использовать удаленные потомки.


Автор: orgasm (не зарегистрирован), дата: 20 ноября, 2008 - 23:23
#permalink

Сначала удаляются пустые текстовые элементы, если браузер их создал (в соответствии с написанным в ДОМ-1). Google Chrome, кстати.


Автор: valenok2003, дата: 10 апреля, 2009 - 12:08
#permalink

У меня почему-то после первого нажатия никто не удаляется, после второго - удаляются Саша и Паша одновременно, потом Маша, потом Даша. Хоть в опере хоть в IE.
Извините, сам разобрался.


Автор: Ax (не зарегистрирован), дата: 2 июня, 2009 - 11:05
#permalink

А мне не понятно, почему сначало ничего не происходит, а лишь потом удаляются Саша и Паша. Может быть потому, что между ними пустые узлы? Мне кажется это нужно уточнить.


Автор: aldan8, дата: 24 августа, 2009 - 17:52
#permalink

Полностью согласен.
Если удалить пробелы и табы между еллементами
(ol и li) все работает правильно , т. е. удаляются без задержки .


Автор: Satis-PSP, дата: 14 октября, 2009 - 09:59
#permalink

А почему нельзя было просто вписать:

node.innerHTML = ''

??

Работает же.


Автор: Илья Кантор, дата: 14 октября, 2009 - 15:01
#permalink

Не очень помню детали, но это вроде не всегда работает, бывало в узле оставалось не пусто, а nbsp; (в IE?)

Может подскажете точнее, если кто недавно на граблю наступал с таким способом ?


Автор: Богдан (не зарегистрирован), дата: 3 февраля, 2010 - 12:17
#permalink

В IE можно было бы использовать, ан нет, глючит

<select name="flat" id="flat" size="5">
           <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
		 <script>
			document.getElementById('flat').innerHTML='<option value="2">111</option>';
		 </script>

Автор: Илговский Евгений, дата: 11 ноября, 2009 - 11:09
#permalink

Я думаю, что произойдет утечка памяти...


Автор: Гость (не зарегистрирован), дата: 24 ноября, 2009 - 18:51
#permalink

А из-за чего ? Т.е. Это предположение или утечка памяти в данном случае обоснована ?


Автор: Satis-PSP, дата: 15 октября, 2009 - 11:45
#permalink

пробывал в IE, Opera, Chrome и Firefox. Везде все сработало. Ну может он не такой надежный и все таки не всегда срабатывает. Сложно сказать.


Автор: EgorOFF (не зарегистрирован), дата: 25 октября, 2009 - 14:52
#permalink

Учитывая особенность поведения DOMNodeList, целесообразно удаление проводить в обратном порядке, например, так:

function removeChildren(node) {
    var children = node.childNodes;
    // так как последний элемент имеет индек, на 1 меньше, чем length, начинаем с i-1
    // i>=0 - нулевой элемент списка существует, и нужно его удалить
    for(var i=children.length-1; i>=0; i--) {
        node.removeChild(children[i]);
    }
}

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

for(var i=children.length-1; i>=0; i--) {
    if(children[i].getAttribute("class")=="delete"){
        node.removeChild(children[i]);
    }
}

Автор: subzey, дата: 6 декабря, 2009 - 15:12
#permalink

Да, это хороший способ, когда-то даже очень сильно выручил.

...хотя, кстати, и он не стопроцентный. Обработчик DOMNodeRemoved сможет поменять содержимое списка нод между итерациями цикла.


Автор: Hank (не зарегистрирован), дата: 16 июня, 2020 - 21:51
#permalink

I very much agree with this statement. fence installation miami


Автор: Гость (не зарегистрирован), дата: 16 июня, 2020 - 22:39
#permalink

Автор: WeslomPo (не зарегистрирован), дата: 12 апреля, 2010 - 08:50
#permalink

function removeChildren(node) {
var children = node.childNodes
var Count = children.length
for(var i=Count;i>0; i--) {
var child = children[i]
node.removeChild(child)
}
}

А чем такое не тру?


Автор: lum (не зарегистрирован), дата: 21 апреля, 2010 - 20:26
#permalink

Будет ошибка
var child = children[i]
ведь при первой итерации у тя i=children.length


Автор: THERE (не зарегистрирован), дата: 2 июня, 2010 - 21:18
#permalink
function removeChildren(node) {
    var children = node.childNodes
    var length = children.length

    for(var i=0; i < length; i++) {
        node.removeChild(children[0])
    }
}

я новичёк и не знаю тонкостей работы интерпретатора, но по опыту других языков это должен быть самый быстрый вариант, поскольку нет вызовов функций в условии цикла. правда этот вариант работоспособен при условии, что во время работы цикла не изменится размер DOMNodeList.


Автор: Hobbit (не зарегистрирован), дата: 2 июля, 2010 - 13:10
#permalink

Спасибо, весь цикл статей был хорош, но тут я бы сделал вот так:

function removing(elem){
            var count = elem.childNodes.length;
            if (elem.childNodes[count-1].nodeType == 1 && elem.childNodes[count-1].tagName != "BR"){
                var remove = elem.childNodes[count-1];
                elem.removeChild(remove);
            }
            else{
                var remove = elem.childNodes[count-1];
                elem.removeChild(remove);
                removing(elem);
            }
        }

Автор: Гость (не зарегистрирован), дата: 14 октября, 2010 - 12:50
#permalink

я только узнаю азы JS (сам я С++-сник), в данном случае почему нельзя использовать:
while(elem.firstChild != null) elem.removeChild(elem.firstChild);
?


Автор: StNekroman (не зарегистрирован), дата: 5 марта, 2011 - 18:47
#permalink

Ты всё верно написал.
Так и надо делать.
Я сам С++-ник.
Это они не программеры, раз выдумывают рашпильные, полурабочие способа дял стандартных действий.


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 13:15
#permalink

Посмотрите на него, какой умный.
А ничего, что способ из статьи более читаемый? И откуда Вы взяли, что это "полурабочий способ"?


Автор: wlong, дата: 1 декабря, 2013 - 08:41
#permalink

Самый точный алгоритм. Именно так профессиональные программисты и пишут.


Автор: Гость (не зарегистрирован), дата: 4 июня, 2011 - 13:14
#permalink

Можно использовать вот такую функцию для удаления всех дочерних элементов

function removeChildren(node) {
var ch = node.childNodes;

for(var i=0;i


Автор: Гость (не зарегистрирован), дата: 4 июня, 2011 - 13:15
#permalink

Можно использовать вот такую функцию для удаления всех дочерних элементов

function removeChildren(node) {
var ch = node.childNodes;

for(var i=0;i<ch.length; i++) {
	        var child = children[i--];
	        node.removeChild(child);
	    }
}

Автор: trikadin, дата: 2 июля, 2011 - 12:54
#permalink

Короткая:

function removeChilds(node)
{
 while(node.childNodes)
  node.removeChild(node.firstChild);
};

Автор: lenok_sm, дата: 21 июля, 2011 - 17:13
#permalink

querySelectorAll и getElement(s)By(TagName, ClassName ...) возвращают разные списки.
В первом случае работать со списком можно как с массивом (т.е список не живой).

<!DOCTYPE html>
<div></div>
<div></div>
var par = document.body;
var list = document.querySelectorAll( 'body *' );

typeof list;      // object
list.toString(); // [object NodeList]

console.dirxml( list ); // [<div>​</div>​, <div>​</div>​]
par.removeChild( list[0] );
console.dirxml( list ); // [<div>​</div>​, <div>​</div>​]

Это является ещё одним плюсом в пользу использования querySelector(All)


Автор: lenok_sm, дата: 21 июля, 2011 - 17:15
#permalink

Немного промахнулась разделом =(


Автор: mov (не зарегистрирован), дата: 21 октября, 2011 - 01:57
#permalink

Мне иногда бывает удобно делать так:

function removeNext(tagID){
    var elem = document.getElementById(tagID)
    elem.removeChild(elem.getElementsByTagName('li')[0])
}

Автор: Бо (не зарегистрирован), дата: 21 октября, 2011 - 03:44
#permalink

На мой взгляд:
while(elem.firstChild != null) elem.removeChild(elem.firstChild);
наглядно и лаконично


Автор: Zenitchik (не зарегистрирован), дата: 23 апреля, 2012 - 12:43
#permalink
while(elem.firstChild) elem.removeChild(elem.firstChild);

Ещё лаконичнее, и ничуть не менее наглядно для человека, знающего JS.


Автор: pashak, дата: 11 марта, 2013 - 14:34
#permalink
var t; while(t=elem.lastChild) elem.removeChild(t);

Чуть быстрее и чуть меньше. Выигрыш за счёт минимального количества обращений к свойствам DOM (lastChild, removeChild по одному разу).


Автор: MiF, дата: 17 октября, 2012 - 13:33
#permalink

А можно написать так:

function removeChildren(node) {
    var children = node.childNodes

    for(i=children.length; i--; )
        node.removeChild(children[0]);
    }
}

Работает быстрее из за однократного обращения к length


Автор: Vasy, дата: 9 февраля, 2013 - 12:28
#permalink

Скажите пожалуста почему данный код

1
function removeChildren(node) {
2
    var children = node.childNodes
3
 
4
    for(var i=0;i<children.length; i++) {
5
        var child = children[i]
6
         
7
        node.removeChild(child)
8
    }
9
}

удаляет сразу два элемента на второе выполнение цылка?
вернее не так,как он вообще удаляет когда остаётся два элемента.Насколько я понимаю он должен удалять 2 элемент массива а на третьем прохождении цикла элементов всего 0 и 1 ...как он удаляет эти элементы?


Автор: Гость (не зарегистрирован), дата: 8 декабря, 2015 - 22:00
#permalink

При первом нажатии(запуске цикла) удаляются пробелы. При втором нажатии удаляются 0 и 3 элементы, цикл завершается, поскольку i=2, а children.length=1 (маша-0, даша-1). При 3 выход из цикла уже при i=1, ну и дальше остается одна даша, для которой опять придется запускать цикл.


Автор: Гость (не зарегистрирован), дата: 8 декабря, 2015 - 22:01
#permalink

Очепятался не 0й и 3й, а 0й и 2й элементы. Извините


Автор: Разработчик (не зарегистрирован), дата: 12 июня, 2018 - 21:15
#permalink

Как же искал долго, незаменимая помощь в разработке любых программ и сайтов. То, что нужно!


Автор: gulo (не зарегистрирован), дата: 14 июля, 2020 - 11:20
#permalink

Thank you i really nead it run 3


Автор: jackjohnson (не зарегистрирован), дата: 25 января, 2022 - 11:46
#permalink

paper io 2 Thank you for bringing new knowledge to everyone, it is very helpful.


Автор: emmawatson (не зарегистрирован), дата: 7 февраля, 2022 - 10:31
#permalink

I felt very happy while reading this site. This was really very informative site for me. I really liked it. slope 2


Автор: Гость (не зарегистрирован), дата: 13 апреля, 2022 - 02:45
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 14:23
#permalink

Автор: Vincen (не зарегистрирован), дата: 20 июля, 2022 - 11:16
#permalink

Participating in the drift hunters racing game, where you may freely drive away from exhaustion, will undoubtedly be a lot of fun.


Автор: antiguans2000, дата: 3 августа, 2022 - 18:59
#permalink

This is another plus in favor of using querySelector(All). Greenville landscaper


Автор: gamerun (не зарегистрирован), дата: 25 августа, 2022 - 11:28
#permalink

Thank you for your post. I have read through several similar topics! However, your article gave me a very special impression, unlike other articles. I hope you continue to have valuable articles like this or more to share with everyone! foodle


Автор: Pauline Alexander (не зарегистрирован), дата: 26 августа, 2022 - 05:30
#permalink

Taking its cues from Run 3, color tunnel is a rapid-fire dodging game. At breakneck speed, you must dodge obstacles of all forms as you move through a colorful tunnel.


Автор: 먹튀검증 (не зарегистрирован), дата: 29 августа, 2022 - 07:55
#permalink

Can I use some of your writing as a reference for my thesis project? I would like to use it as a reference because it is a professional and well-written article that makes it easy for people to understand when presenting. 먹튀검증


Автор: 사설토토 (не зарегистрирован), дата: 29 августа, 2022 - 07:56
#permalink

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. 사설토토


Автор: 먹튀사이트 (не зарегистрирован), дата: 29 августа, 2022 - 07:57
#permalink

Do you have any more articles on these topics? I want to look for more of your posts because they are in the same direction as the answer I am seeking. 먹튀사이트


Автор: abel1303 (не зарегистрирован), дата: 20 октября, 2022 - 06:54
#permalink

Thank you for sharing the tunnel rush article. I am also a blogger and I also hope that my article will be known by many people. Good luck.


Автор: Nimo (не зарегистрирован), дата: 8 ноября, 2022 - 06:18
#permalink

Thank you for the info. The details you have offered are truly helpful.

the backrooms


Автор: 바카라온라인 (не зарегистрирован), дата: 21 ноября, 2022 - 07:38
#permalink

What a nice post! I'm so happy to read this. 바카라온라인 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.


Автор: 카지노사이트 (не зарегистрирован), дата: 4 декабря, 2022 - 07:01
#permalink

What a post I've been looking for! I'm very happy to finally read this post. 카지노사이트 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
fchh


Автор: 카지노사이트 (не зарегистрирован), дата: 25 декабря, 2022 - 07:57
#permalink

What a post I've been looking for! I'm very happy to finally read this post. 카지노사이트 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
hgkkl


Автор: 바카라게임사이트 (не зарегистрирован), дата: 9 февраля, 2023 - 07:07
#permalink

I'm so happy to finally find a post with what I want. 바카라게임사이트 You have inspired me a lot. If you are satisfied, please visit my website and leave your feedback.
FGGH


Автор: xiwe (не зарегистрирован), дата: 23 марта, 2023 - 12:55
#permalink

I am very happy to read your article. Documents are shared as a valuable resource.
Satisfy customers who come to papa's burgeria shop.


Автор: Гость (не зарегистрирован), дата: 12 апреля, 2023 - 13:18
#permalink

Minesweeper is an extremely popular game and is loved by many people around the world.


Автор: zetpoda (не зарегистрирован), дата: 6 мая, 2023 - 10:12
#permalink

This article was a great example of how chess online to write for a general audience without dumbing down the material. The writer managed to strike the perfect balance between accessibility and intellectual rigor.


Автор: Гость (не зарегистрирован), дата: 15 мая, 2023 - 06:20
#permalink

Currently, Emoji icons are supported on all major platforms including OS X, iOS, Windows and Android. You can easily all emojis copy and paste you like.


Автор: 토토사이트 (не зарегистрирован), дата: 19 мая, 2023 - 08:49
#permalink

You should write very seriously, I hope I see your sincerity, such a good idea should be seen by more people, because it is really very good, really thank you so much for sharing so selflessly.https://totowho.com


Автор: 먹튀신고 (не зарегистрирован), дата: 19 мая, 2023 - 08:49
#permalink

I think it hit the nail on the head. I agree with you very much. It opened my mind. It will help more people answer questions and find a better person. Thank you for your effort. Let's give high five and cheer up. https://totowho.com


Автор: usualsnowy (не зарегистрирован), дата: 26 июня, 2023 - 05:18
#permalink

More people will be able to get the right answer and improve their lives dumb ways to die


Автор: Girishary (не зарегистрирован), дата: 3 июля, 2023 - 11:21
#permalink

If you're serious about sharing your notion with the world, you should take your writing extremely seriously. snow rider 3d


Автор: gemmalyly (не зарегистрирован), дата: 20 июля, 2023 - 11:44
#permalink

DOM представляет каждый элемент на странице (такие как заголовки, параграфы, изображения и т.д.) в виде объектов connections, которые можно манипулировать с помощью JavaScript.


Автор: classroom 6x (не зарегистрирован), дата: 24 июля, 2023 - 12:25
#permalink

Software companies and developers also classroom 6x feel the pressure during these times. Prompt responses and effective solutions become essential in maintaining customer satisfaction and confidence in their products.


Автор: victoriaemmy68 (не зарегистрирован), дата: 23 августа, 2023 - 04:53
#permalink

As you progress, the difficulty intensifies with a series of twists, turns, and obstacles that require quick thinking and precise maneuvers. Play slope game


Автор: michaelarrington (не зарегистрирован), дата: 7 сентября, 2023 - 04:58
#permalink

Действительно, при работе с DOM-узлами в JavaScript, особенно при удалении элементов, важно понимать, что NodeList, возвращаемый методом childNodes, является динамичным и обновляется в реальном времени. Это может повлиять на итерацию по элементам и удаление из списка io games


Автор: Halina (не зарегистрирован), дата: 17 октября, 2023 - 11:20
#permalink

Could you check out my website if you have some time? After reading what I written, kindly leave your feedback. For some reason, no one is erased following the first click; but, on the second, Pasha and Sasha are both simultaneously removed, followed by Masha and Dasha. Or in Internet Explorer or Opera. geometry dash lite


Автор: Donald Aucoin (не зарегистрирован), дата: 16 декабря, 2023 - 16:15
#permalink

This place really shares very useful and detailed information, I always like to follow it, I'm usually a person who enjoys playing games and plays games like hungry shark, I think it's very nice to play games.


Автор: chiuchiu (не зарегистрирован), дата: 28 декабря, 2023 - 13:00
#permalink

Collection of unblocked games premium for schools. Challenge or team up with friends in a variety of games.


Автор: Daniellairthe (не зарегистрирован), дата: 15 марта, 2024 - 07:30
#permalink

fnf mods is a fascinating website devoted to Friday Night Funkin' game series. In this series of games, players are challenged with loads of wonderful music, rhythms and sounds that keep players engaged without getting bored.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 9 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum