HTML 에서 Array.forEach 의 한계 -> ie, getElementsByName

HTML 에서 Array.forEach 의 한계 -> ie, getElementsByName

chrome, firefox 등에서는 input 을 getElementsByName 등으로 잡을 경우

Array로 잡아준다.

반면 ie는 HtmlCollection 이라는 것으로 잡아준다.

그래서 forEach는 동작하지 않는다.

HtmlCollection 이 Array 처럼 동작하게 하기 위한 파싱.. 따로 prototype 에 extend 하지는 않고 그냥 함수에 인자로 해당 HtmlCollection을 넣는 식으로 구성했다.

/**

 * for IE HtmlCollection parse to Array

 */

var toArray = function(eles) {

       // shield

       if (eles.forEach && typeof eles.forEach == 'function') {

              return eles;

       }

       

       var ELEMENT_NODE = 1;

       var isElements = (eles.item && (eles.item(0).nodeType == ELEMENT_NODE));

       if (!isElements) {

              if (window.console) {

                     console.log("toArray use only Elements.");

              }

              return eles;

       }

       

       // logic

       var tempItem;

       var resArr = [];

       var htmlCollection = eles;

       for (var i = 0, len = htmlCollection.length; i < len; i++) {

              tempItem = htmlCollection.item(i);

              resArr.push(tempItem);

       };

       return resArr;

}

ele.labes 하면 input 인경우 htmlFor 가 해당 input id와 동일한 label 을 가져온다.

이 것도 ie에는 없다.

인풋의_아이디 가 해당 input 의id라고 할 때

document.querySelector('label[for'+인풋의_아이디+'])

로 가져올 수 있다.

관련 디버깅

NodeList - Web API 참조 문서 | MDN | https://developer.mozilla.org/ko/docs/Web/API/NodeList

HTMLCollection - Web API 참조 문서 | MDN | https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection

Document.getElementsByName() - Web API 참조 문서 | MDN | https://developer.mozilla.org/ko/docs/Web/API/Document/getElementsByName

Array.prototype.forEach() - JavaScript | MDN | https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

HTMLCollection - Web API 참조 문서 | MDN | https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection

Element - Web APIs | MDN | https://developer.mozilla.org/en-US/docs/Web/API/Element

Node - Web APIs | MDN | https://developer.mozilla.org/en-US/docs/Web/API/Node