Javascript - 다중 NodeLists를 함께 연결

Question

기능을 시뮬레이션하기위한 우아한 방법을 묻는 질문은 이 지원되지 않았기 때문에 IE 또는 이전 브라우저에서 getElementsByTagName 함수의 결과를 시뮬레이션하는 것이 었습니다. 물론, 반환 된 객체가 지원하지 않는 이유는 Array이 아니기 때문입니다. 죄송합니다.

getElementsByTagName은 실제로 NodeList을 반환합니다. 진짜 질문은 다음과 같습니다. 문서 (input, select, textarea, button)의 모든 양식 요소를 하나의 목록으로 묶어서 루프를 만드는 좋은 방법은 무엇입니까? 배열이 필요하지 않습니다 ... 하나의 NodeList도 완벽 할 것입니다.

회사 인트라넷 (곧 IE8이지만) 용으로 IE6을 사용하고 있습니다.

내가 생각 해낸 대답했다 : 그것은 간단하게되었고, 아마 별도의 함수에 코드를 넣어 호출 세 번 다른 nodelists으로보다는 걱정하는 것이 더 수행

• 그들을 하나로 모으는 좋은 방법.

• 궁극적으로 MooTools를 사용하여 전환했습니다 (몇 시간 후에 모든 다른 프레임 워크의 비교를 읽음). 이제 원하는 항목 배열을 얻는 것이 매우 간단합니다. 나는 사람들이 일을하는 가장 좋은 방법을 찾아 내려고 뇌를 쓰러 뜨리기보다는 이런 자바 스크립트 프레임 워크를 사용할 것을 권장한다. 물론 저는 실제로 원시 언어를 배우기 위해 모든 노력을 기울이고 있습니다. (그래서 나는 오랫동안 프레임 워크를 사용하지 않았습니다.)하지만 항상 비즈니스를 진행하는 데있어 가장 빠른 방법은 아닙니다. 코더의 언어 능력을 향상시키는 것으로

업데이트 : 거의 2 년 후 나는 jQuery를 사용하여 끝내겠다!

Answer 1

노드 목록을 연결하려면 Array.prototype.slice.call을 사용하여 배열로 변환 한 다음 정상적으로 연결하십시오.

var a = Array.prototype.slice.call(document.getElementsByTagName("p")), 
    b = Array.prototype.slice.call(document.getElementsByTagName("div")) 

var c = a.concat(b); 

편집 : 만 요소의 몇 가지 유형이있는 경우,이 괜찮습니다하지만 DOM의 수는 당신이 만드는 전화로 성능이 저하

(댓글에 응답). document.getElementsByTagName('*')을 실행하고 목록을 반복하는 것이 더 좋고 빠를 수 있으며 필요한 요소 인 nodeName을 선택하십시오.

위에서 언급 한 Array.prototype.slice 방법이 모든 브라우저에서 작동하지 않을 수 있다는 점도 명심해야합니다. sizzle.js (jQuery 뒤에있는 선택기 엔진)의 # 723 시작 라인을 확인하십시오.

물론 모든 두통을 처리하는 jQuery와 같은 라이브러리를 사용하는 것이 가장 좋습니다.당신은 간단하게 수행 할 수 있습니다

$("input, select, textarea, <other tags>") 

Answer 2

var a1=document.getElementsByTagName('div'), 
a2=document.getElementsByTagName('button'); 
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length)) 

Answer 3

function mergeNodeLists(a, b) { 
    var slice = Array.prototype.slice; 
    return slice.call(a).concat(slice.call(b)); 
} 

console.log(mergeNodeLists(inputs, selects)); // => [input, select]

Answer 4

나는 생각 좋겠있을 것 가지고, 어쨌든 나는이 주사를 준 다음과 같은 기능을 함께했다이보다 더 많은 답하고 나는 머리를 약간 부딪쳐 야했지만. MDN Documentation에서 알 수 있듯이 ES6 spread operator와

function group_elements(element, tags) { 
    var elements = element.getElementsByTagName('*'); 
    var results = []; 
    for (var i = 0; i < elements.length; ++i) { 
     if (tags.indexOf(elements[i].nodeName.toLowerCase()) > -1) { 
     results.push(elements[i]); 
     } 
    } 
    return results; 
} 


var form = document.getElementById('form'); 
var tags = ['input', 'select']; 
console.log(group_elements(form, tags)); 

Answer 5

당신이

let arr = [...nodeList1, ...nodeList2]; 

Answer 6

을 수행 할 수 있습니다, 당신은 또한 그것을 지원하는 브라우저에 배열에의 NodeList를 변환하는 Array.from를 사용할 수 있습니다.