子要素のリストを達成するためのJS天然配列の方法は、分析を逆転させました

この記事では、ネイティブのJSは、子要素のリストの順番を逆に実装する方法について説明したJavaScriptは注文の要素のリストの形で例で、DOM要素の配列の逆方法、innerHTMLプロパティ・メソッドのために、関連するオペレーティングスキルをひっくり返し分析し、必要性の友人はを参照することができ
、この記事例では、逆のJSネイティブ配列表の子要素を達成するための方法を説明します。以下のように、ご参考のためにあなたに共有します：

オーダー内のすべての子要素のリストに関数を書くが、逆の問題は難しいことではありませんが、様々なソリューションがありますが、また大きなパフォーマンスが同じではありませんが、ここではいくつかの一般的に使用される方法は、以下のとおりです。

1.直接DOM操作を使用します：

var ul = document.getElementById('target');
var list = ul.getElementByTagName('li');
var length = list.length;
while(length--){
  ul.appendchild(ul.childNodes[length]);
}

この方法は、ページの子要素の数が多いページのパフォーマンスが大幅に影響されるときとき、子要素が比較的小さい時々ですが、数のパフォーマンスに影響を与える可能性があるので、直接DOMへのページ要素の挿入たびに操作は、したがって、この方法をお勧めしません。

デブリフラグメント方法2.ドキュメント

var ul = document.getElementById('target');
var list = ul.getElementByTagName('li');
var fragment = document.createDocumentFragment();
for(var i = list.length; i >= 0; i--){
  fragment.appendChild(list[i]);
}
ul.appendChile(fragment);

操作の方法を使用して文書フラグメントは、全体の挿入プロセスは断片のみが、DOM操作、ページのパフォーマンスが大幅に改善されますどのくらいの第一の方法に比べ要素の子の数に関係なく、を持っていた、実用的なアプリケーションでは、これを使用することができます方法。

公式フラグメントのドキュメントhttps://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment。

3.配列の逆を使用する方法

var ul = document.getElementById('target');
var chil_arr = Array.prototype.slice.call(ul.getElementByTagName('li'), 0);//因为getElementByTagName获取到的是伪数组，所以要进行转换
var str = '';
chil_arr.reverse();
for(var i = 0; i < chil_arr.length; i++){
  str += chil_arr[i].outerHTML;
}
ul.innerHTML(str);

この方法は、より良いパフォーマンスです。

4. innerHTMLプロパティを使用する方法

var ul = document.getElementById('target');
var list = ul.getElementByTageName('li');
var str = "";
for(var i = list.length; i >= 0; i--){
  str += "<li>" + list[i].innerHTML + "</li>";
}
ul.innerHTML(str);

この方法は、最高のパフォーマンスで、我々は、ページのパフォーマンスを向上させるための実用的なアプリケーションでは、この方法を使用することをお勧めします。