getElementsByClassName을 올바르게 반복하는 방법

Question 1

저는 자바 스크립트 초보자입니다.

을 통해 웹 페이지를 초기화 window.onload하고 있으며 클래스 이름 ( slide)으로 여러 요소를 찾아서 일부 논리에 따라 다른 노드에 재배포해야합니다. Distribute(element)요소를 입력으로 사용하고 배포를 수행하는 기능 이 있습니다. (예를 들어 여기 또는 여기에 설명 된대로) 다음과 같이하고 싶습니다 .

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

그러나 이것은 getElementsByClassName실제로 배열을 반환하지 않기 때문에 마술을 하지 않습니다 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
});

아래 댓글에 따라. nodeList에는 forEach 함수가 없습니다.

이것을 babel과 함께 사용하는 경우 추가 할 수 있으며 Array.from비 노드 목록을 forEach 배열로 변환합니다. Array.fromIE 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

나는 그것이 라이브이기 때문에 반대로 반복하는 Alohci 의 권고를 따랐다 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

나는 반복과 비슷한 문제가 있었고 여기에 착륙했습니다. 다른 사람도 저와 같은 실수를하고있을 수 있습니다.

제 경우에는 선택기가 전혀 문제가되지 않았습니다. 문제는 내가 자바 스크립트 코드를 엉망으로 만들었다는 것입니다. 루프와 하위 루프가있었습니다. 하위 루프는 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

        };

    };