javascript_javascript 팁에서 NodeList를 배열 배열로 처리하는 방법

예:

코드 복사 코드는 다음과 같습니다.

var 앵커 = document.getElementsByTagName ("a" );
for (i = 0; i var ele=anchors[i];//특정 요소 가져오기
//여기에 일부 코드
}

위 코드는 문서의 모든 링크 요소를 가져온 다음 순회하여 작업을 수행한다는 의미입니다.
이 방법을 통해 얻은 DOM 요소 그룹이 배열이 아닌가?라고 물으실 수도 있습니다. 길이 속성을 직접 얻을 수 있고, 인덱스에 따라 해당 개별 요소를 얻을 수도 있습니다. 다니엘의 유명한 오리 이론에 따르면 오리처럼 걷고(길이 속성이 있음) 오리처럼 꽥꽥거립니다. 인덱스 값으로), 오리입니다. 결론은 자명하죠?
이미 자바스크립트에 대해 좀 더 깊이 이해했다면, 값을 얻기 위해 인덱싱할 수 있는 길이 속성이 있습니다. 인수가 이를 수행할 수 있는 것 같죠? 배열? 실제 개발에서는 일반 배열로 운용하지만, 길이와 for 루프는 사용하기 매우 쉽고 오류도 발생하지 않습니다.
그런데 실제로는 배열(Array)이 아니라 NodeList입니다. NodeList는 배열이 아닙니다.
정말 놀랐죠?

1. NodeList가 배열이 아닌 이유는 무엇인가요?

NodeList가 배열인지 확인하세요. 아마도 가장 직접적인 방법은 Array의 독점 푸시 및 팝 방법을 사용해 보는 것입니다.

코드 복사 코드는 다음과 같습니다.

var 앵커 = document.getElementsByTagName("a");
var newEle = document.createElement("a");//Create a 새로운 요소
anchors.push(newEle);//push
var element=ankors.pop();//pop

위 코드가 맞는지 여부는 직접 테스트할 수 있습니다. push 또는 pop 방식인 경우 예외 없이 push 또는 pop 방식이 없다는 메시지가 표시됩니다. 아직도 질문이 있으신가요? 이게 끝인가요? 이런 일방적인 테스트로 인해 Louzhu는 가만히 앉아 긴장을 풀 수 없게 되었습니다. 인수가 배열이 아니라는 것을 증명한 것처럼 동일한 방법을 사용하여 NodeList가 배열이 아님을 증명할 수 있습니다. 아래 코드를 보세요.

코드 복사 코드는 다음과 같습니다.

Array.prototype .testNodeList = "test nodelist"; //배열에 프로토타입 속성 추가
function funcNodeList() {
varlinks = document.getElementsByTagName("a")
alert(links.testNodeList); >}
function test() {
alert(new Array().testNodeList); //노드 목록 테스트
funcNodeList(); //#ff0000 그게 뭐야?
}
test( ); //테스트해 보세요

위의 분석을 통해 NodeList가 배열(Array)이 아님을 확인할 수 있습니다. 그렇다면 컬렉션을 운영하는 습관에 따라 NodeList를 어떻게 운영할까요?

2. NodeList를 Array처럼 운용

NodeList에는 길이가 있기 때문에 for 루프로 인덱싱하여 값을 얻을 수 있지 않나요? ㅎㅎ 가장 직접적인 아이디어는 이렇습니다. g

코드 복사 코드는 다음과 같습니다.

var arr = new Array();
var 앵커 = document.getElementsByTagName("a")
for (var i = 0; i var ele = 앵커s[i ];
arr.push(ele); //arr은 우리가 원하는 배열입니다
}

명확하게 설명하겠습니다. 먼저 배열을 만들고 NodeList를 탐색합니다. , 그리고 각각을 추가합니다. 단일 요소를 배열 변수에 푸시하고 마지막으로 배열 변수에 대해 연산을 수행합니다. 당신의 지능이 모욕당했다고 느끼시나요?
위 내용은 농담이 아닙니다. 다음은 Lou Zhu가 인터넷의 Google에서 찾은 내용이기 때문입니다. 두 줄의 코드로 NodeList를 Array로 변환하여 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 앵커 = document.getElementsByTagName("a")
var arr = Array.prototype .slice.call(anchors) ; //IE 이외의 일반 브라우저



그러나 가장 안타까운 일이 일어났습니다. 위의 코드는 사악한 IE에서 제대로 작동하지 않으며 IE는 JScript 개체가 없습니다라는 메시지를 표시합니다.
위의 분석을 무시하고 NodeList를 Array로 변환하여 작업할 필요가 없다고 생각할 수도 있습니다. 실제로 Lou Zhu는 어떤 프로그래밍 언어를 사용하든 유형 변환은 매우 현명하지 못한 행동이라고 개인적으로 믿습니다. 가장 일반적인 것은 C#의 박싱(boxing) 및 언박싱(unboxing), 수치 데이터 변환 등인데, 이는 성능 문제가 있고 주의하지 않으면 광산 사고를 유발할 수 있습니다. 그런데 Lou Zhu는 왜 NodeList를 배열로만 취급합니까? NodeList를 동적으로 변경할 때 NodeList를 직접 조작하면 자신도 모르게 제한 구역에 실수로 들어갈 가능성이 높기 때문입니다. 예는 다음과 같습니다.
(1), html 문서 조각

링크 테스트

(2), 자바스크립트 테스트 코드

코드 복사 코드는 다음과 같습니다.

var 앵커 = document.getElementsByTagName("a")
for (i = 0; i var ele= document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/")
ele .appendChild( document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); // div가 새 링크를 추가합니다.
}

in 문서가 로드된 후 위 스크립트를 실행합니다. 우리의 원래 의도는 div 내의 기존 a 요소 뒤에 a 요소를 추가하는 것입니다. 하지만 실행하면 브라우저가 충돌할 수 있습니다. 그렇죠? 여기서 Louzhu는 IE가 직접 멈추고, FF는 스크립트가 사용 중인지, 스크립트 실행을 중지할지 여부를 묻는 메시지를 표시합니다. 중지를 클릭한 후 페이지에 n개의 링크가 생성되었습니다. 실제로 이유를 대담하게 분석할 수 있습니다. for 루프 NodeList(전제: for 루프 내부에 새 요소가 추가되어 노드 목록의 길이가 변경됩니다. Chen Tongxie의 제안에 감사드립니다) 길이는 계속해서 변경되고 증가할 것입니다. , 루프는 계속해서 반복되며 마침내 무한 루프가 됩니다. 다음 코드를 사용하면 예상한 것과 효과가 같습니다.

코드 복사 코드는 다음과 같습니다.

varlinks = document.getElementsByTagName("a");
var 앵커 = null; //Array
try {
anchors = Array.prototype.slice.call(links) ;
}
catch (e) { //
anchors = new Array()
for (var i = 0; i anchors.push (links[i]);
}
}
for (i = 0; i var ele = document.createElement ("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/")
ele.appendChild(document.createTextNode("new) 링크 테스트") ; 그다지 어렵지는 않습니다. 물론 가능합니다. 익숙한 코딩 습관을 약간만 수정하면 됩니다.

코드 복사

코드는 다음과 같습니다. var 앵커 = document.getElementsByTagName("a"); var len = 앵커s.length; //변수 정의 for (i = 0; i var ele = document.createElement("a")

ele.setAttribute("href", "http://www.cnblogs .com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); // div는 새 링크를 추가합니다. 링크
}


이 시점에서 궁금한 점이 있든 없든 읽어주셔서 감사하다는 말씀드리고 싶습니다. 조언을 기대합니다.
작성자: Jeff Wong