Правильный обход узлов - javascript childNodes

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

//Deleting from child node
            var target =document.getElementById(element.name).childNodes[0];            
            if(target.hasChildNodes())
            {
              var children = new Array();
              children = target.childNodes;
              for(child in children)
              {
                if(children[child].tagName == 'DIV'){
                    //target.removeChild[child];
                    var deleteChild = document.getElementById(target.childNodes[child].id);
                    deleteChild.parentNode.removeChild(deleteChild);
                }
              }
            }

В особом случае у меня есть 4 "Div" в качестве дочерних, это удаляет только два DIV, а не все. Я предполагаю, что длина также постоянно меняется, поэтому она не может добраться до всех детей.

Это правильный способ обхода, я упускаю что-то очевидное?


javascript html dom removechild child-nodes
person NewBee    schedule 09.02.2017    source источник
comment
Вместо того, чтобы объяснять, что у вас есть в вашем описании, нажмите кнопку <> в редакторе и ПОКАЖИТЕ, что у вас есть - добавьте HTML, и у вас есть минимальный воспроизводимый пример - не забудьте иметь вывод и ОЖИДАЕМЫЙ вывод   -  person mplungjan    schedule 09.02.2017
comment
При использовании childNodes вы также собираете текстовые узлы, пробелы и даже комментарии. Не могу точно сказать, потому что вы не опубликовали HTML, и вы говорите о пересечении DOM... это все равно, что объяснять географию без карты.   -  person zer00ne    schedule 09.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы совершенно правы: проблема в том, что вы используете статический индекс, когда NodeList, на который вы ссылаетесь (target.childNodes), активен: он обновляется, когда вы удаляете некоторые из этих дочерних узлов.

Самый простой способ сделать это — составить статический список дочерних узлов элемента. Кажется, вы пытаетесь это сделать, но в Javascript есть динамическая типизация, поэтому var children = new Array(); по сути ничего полезного не делает. Это не заставляет NodeList становиться массивом. Вам нужна функция Array.from:

var children = Array.from(target.childNodes);
var child; // don't forget to declare this variable
for(child in children)
{
    if(children[child].tagName == 'DIV'){
        //target.removeChild[child];
        var deleteChild = target.childNodes[child]; // simplify
        deleteChild.parentNode.removeChild(deleteChild);
    }
}

Обратите внимание, что Array.from — это новая функция, поэтому вы должны предоставить прокладку для старых браузеров.

person lonesomeday    schedule 09.02.2017
comment
спасибо за вклад, я попробую этот метод, похоже, уменьшение длины и счетчика циклов также выполняет свою работу. Если кому-то интересно, что это значит, цикл for(int i = 0; i ‹ children.length; i++) -> уменьшает счетчик длины, а также i на 1 каждый раз, когда я удаляю дочерний узел. - person NewBee; 09.02.2017
comment
@NewBee Нет, это не сработает, если оба последних дочерних узла являются элементами div. - person lonesomeday; 09.02.2017