Как правильно перебирать getElementsByClassName

Question 1

Я новичок в Javascript.

Я открываю веб-страницу через window.onload, мне нужно найти группу элементов по имени их класса ( slide) и перераспределить их в разные узлы на основе некоторой логики. У меня есть функция, Distribute(element)которая принимает элемент в качестве входных данных и выполняет распределение. Я хочу сделать что-то вроде этого (как указано, например, здесь или здесь ):

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

однако это не делает для меня волшебства, потому getElementsByClassNameчто на самом деле возвращает не массив, а a NodeList, который ...

... это мои предположения ...

... изменяется внутри функции Distribute(дерево DOM изменяется внутри этой функции, и происходит клонирование определенных узлов). For-eachструктура петли тоже не помогает.

Переменные слайды действуют действительно недетерминированно, на каждой итерации они дико меняют длину и порядок элементов.

Как правильно перебирать NodeList в моем случае? Я думал о заполнении временного массива, но не знаю, как это сделать ...

РЕДАКТИРОВАТЬ:

Важный факт, который я забыл упомянуть, - это то, что один слайд может быть внутри другого, это на самом деле то, что меняет slidesпеременную, как я только что узнал благодаря пользователю Alohci .

Решение для меня заключалось в том, чтобы сначала клонировать каждый элемент в массив, а затем передавать массив по очереди Distribute().

Question 2

Согласно MDN, способ получить элемент из a NodeList:

nodeItem = nodeList.item(index)

Таким образом:

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

Я сам не пробовал (обычный forцикл у меня всегда работал), но попробую.

Question 3

Если вы используете новый querySelectorAll, вы можете вызвать forEach напрямую.

document.querySelectorAll('.edit').forEach(function(button) {
    // Now do something with my button
});

В комментарии ниже. В списках узлов нет функции forEach.

Если вы используете это с babel, вы можете добавить, Array.fromи он преобразует списки без узлов в массив forEach. Array.fromне работает изначально в браузерах ниже, включая IE 11.

Array.from(document.querySelectorAll('.edit')).forEach(function(button) {
    // Now do something with my button
});

На нашей встрече вчера вечером я обнаружил еще один способ обработки списков узлов, не имеющих forEach

[...document.querySelectorAll('.edit')].forEach(function(button) {
    // Now do something with my button
});

Браузерная поддержка [...]

Отображение в виде списка узлов

Отображается как массив

Question 4

Вы всегда можете использовать методы массива:

var slides = getElementsByClassName("slide");
Array.prototype.forEach.call(slides, function(slide, index) {
    Distribute(slides.item(index));
});

Question 5

Я последовал рекомендациям Алохси о лупе в обратном направлении, потому что это концерт nodeList. Вот что я сделал для любопытных ...

  var activeObjects = documents.getElementsByClassName('active'); // a live nodeList

  //Use a reverse-loop because the array is an active NodeList
  while(activeObjects.length > 0) {
    var lastElem = activePaths[activePaths.length-1]; //select the last element

    //Remove the 'active' class from the element.  
    //This will automatically update the nodeList's length too.
    var className = lastElem.getAttribute('class').replace('active','');
    lastElem.setAttribute('class', className);
  }

Question 6

 <!--something like this--> 
<html>
<body>



<!-- i've used for loop...this pointer takes current element to apply a 
 particular change on it ...other elements take change by else condition 
-->  


<div class="classname" onclick="myFunction(this);">first</div>  
<div class="classname" onclick="myFunction(this);">second</div>


<script>
function myFunction(p) {
 var x = document.getElementsByClassName("classname");
 var i;
 for (i = 0; i < x.length; i++) {
    if(x[i] == p)
    {
x[i].style.background="blue";
    }
    else{
x[i].style.background="red";
    }
}
}


</script>
<!--this script will only work for a class with onclick event but if u want 
to use all class of same name then u can use querySelectorAll() ...-->




var variable_name=document.querySelectorAll('.classname');
for(var i=0;i<variable_name.length;i++){
variable_name[i].(--your option--);
}



 <!--if u like to divide it on some logic apply it inside this for loop 
 using your nodelist-->

</body>
</html>

Question 7

У меня была аналогичная проблема с итерацией, и я приземлился здесь. Возможно, кто-то другой совершает ту же ошибку, что и я.

В моем случае проблема вовсе не в селекторе. Проблема заключалась в том, что я испортил код javascript: у меня был цикл и подцикл. Подцикл также использовался iкак счетчик, а не j, поэтому, поскольку подцикл переопределял значение iосновного цикла, этот так и не попал на вторую итерацию.

var dayContainers = document.getElementsByClassName('day-container');
for(var i = 0; i < dayContainers.length; i++) { //loop of length = 2
        var thisDayDiv = dayContainers[i];
        // do whatever

        var inputs = thisDayDiv.getElementsByTagName('input');

        for(var j = 0; j < inputs.length; j++) { //loop of length = 4
            var thisInput = inputs[j];
            // do whatever

        };

    };