javascript 비정상적인 노드 수집_javascript 기술

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title>Situ Zhengmei의 노드 컬렉션 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이</div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

nodeList를 다음으로 변환합니다. 배열에는 문제가 없습니다!

코드 복사

코드는 다음과 같습니다.

window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
var arr =
for( var i= 0,n=c.length;iarr.push(c[i])
}
for(var i=0,n=arr.length; ialert(arr[i] " " i)
d.appendChild(arr[i])
}
div.parentNode.replaceChild(d,div)
}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title> </title>Situ Zhengmei의 노드 컬렉션 <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa"> </p> <p class="aaaa">시투 정메이</p> <p class="aaaa">시투 정메이</p> <p class="aaaa">시투 정메이</p> <p class="aaaa">시투 정메이</p> </div>시투 정메이
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

분명히 nodeList에는 배열에 없는 기능이 있습니다. 실행 상자 2에서 노드를 문서 조각에 추가하면 실제로 DOM 트리에서 분리된다는 것을 알 수 있습니다. nodeList는 이 변경 사항을 추적하고 동적으로 자체 변경해야 하며 선형 증분은 올바른 인덱스에 해당할 수 없습니다. 마디! 그래서 우리는 매번 firstChild를 얻습니다. 코드 복사

코드는 다음과 같습니다.


window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c [0] )//비워질 때까지 매번 첫 번째 노드만 가져옵니다.
div.parentNode.replaceChild(d,div)

}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title> </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style>Situ Zhengmei의 변태 아동 노드 <div id="aaa"> <p class="aaaa"> </p> <p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이<p class="aaaa"> </p>시투 정메이</div> 시투 정메이

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
顺便一提，由getElementsByTagName取得的HTMLCollection也是这个样子，因此处理这类节点集合要打起十二分精神了！

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title>HTMLCollection by 司徒正美 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = document.getElementsByTagName("p") for(var i=0,n=c.length;i<n;i++){ alert(c[i] + " "+ i) d.appendChild(c[i]) } div.parentNode.replaceChild(d,div) } </script> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这两种节点集合在各浏览器还实现得不太一样，如标准浏览器我们可以用Array.prototype.slice.call将它们转换为原生数组，IE则报错。标准浏览器的它们有hasOwnProperty与valueOf，而IE是没有的……