배열의 모든 요소에 액세스

Question

저는 javascript를 배우고 DOM 통과를 연습합니다. 'nodeName'을 기반으로 부모 요소의 배열을 반환하는 메서드를 만들었습니다. 나는 등

Element.prototype.specificParent = function(nodeName1) { 
    nodeName1 = nodeName1.toUpperCase(); 
    var x = this; 
    var matches = []; 
    var allParents = []; 

    while(x.parentNode !== null) { 
     allParents.push(x.parentNode); 
     x = x.parentNode; 
    } 

    for(i = 0; i < allParents.length; i++) { 
     if(allParents[i].nodeName === nodeName1) { 
      matches.push(allParents[i]); 
     } 
    } 

    return matches; 

} 

이 특정 요소의 모든 (즉, 다른의 부모)을 선택하고 스타일을하거나 변경할 수 있도록 내가 가지, 내 원하는 효과를 가지고, 이런 짓을했는지.

:

var parents = document.getElementById("startHere").specificParent("div"); //gets all parent div elements and returns the array 

//I can then style them individually: 
parents[0].style.background = "black"; 
parents[1].style.background = "black"; 
//etc, etc, etc 

//or I could use a for loop to style them all: 
for(i = 0; i < parents.length; i++) { 
    parents[i].style.background = "black"; 
} 

는 내가하고 싶은 것은 이것이다 : 만 같은 요소에 액세스 할 수 있기 때문에, 반환 된 배열의 모든 요소에 액세스하기 위해, for 루프 같은 것을 사용해야합니다

var parents = document.getElementById("startHere").specificParent("div"); 
parents.style.background = "black"; //changing all the elements in the array 

허용하는 "specificParent"메서드를 변경할 수있는 방법이 있습니까?

이것은 무의미한 운동처럼 보일 수 있지만 나는 배우고 있습니다!

감사

Answer 1

은 아마도 가장 간단한 방법은 arrays API을 사용하는 것입니다. 당신이 ES6를 사용할 수있는 경우
, 그렇게 같을 것이다

parents.forEach(parent => parent.style.background = "black") 

ES5에서 약간 덜 명확 :

Element.prototype.specificParent = function(nodeName1) { 
    nodeName1 = nodeName1.toUpperCase(); 
    var x = this; 
    var matches = []; 
    var allParents = []; 

    while(x.parentNode !== null) { 
     allParents.push(x.parentNode); 
     x = x.parentNode; 
    } 

    for(i = 0; i < allParents.length; i++) { 
     if(allParents[i].nodeName === nodeName1) { 
      matches.push(allParents[i]); 
     } 
    } 

    function setStyle(styleKey, styleValue) { 
     matches.forEach(function(parent) { parent.style[styleKey]= styleValue; }); 
    } 

    return { 
     elements : matches, 
     setStyle : setStyle 
    }; 
} 

:이 작업을 수행 할 수 있습니다 귀하의 의견에

parents.forEach(function(parent) { parent.style.background = "black"; }) 

---

을 바탕으로

다음과 같이 사용하십시오.

var parents = document.getElementById("startHere").specificParent("div"); 
parents.setStyle("background", "black");