javascript_javascriptのヒントでNodeListをArray配列として扱う方法

例:

コードをコピー コードは次のとおりです:

varアンカー = document.getElementsByTagName ("a" );
for (i = 0; i var ele=anchors[i];// 特定の要素を取得します
// ここにコードを入力します
}

上記のコードは、ドキュメント内のすべてのリンク要素を取得し、トラバースして何かを行うことを意味します。
おそらく、このメソッドで取得した DOM 要素のグループは配列ではないのではないかと疑問に思うかもしれません。ご存知のとおり、長さ属性を直接取得でき、インデックスに従って対応する個々の要素を取得することもできます。ダニエルの有名なアヒル理論によると、アヒルのように歩き (長さ属性を持ち)、アヒルのように鳴き声を上げます。インデックス値に）の場合、それはアヒルです。結論は自明ですよね？
すでに JavaScript を少し深く理解している場合は、値を取得するためにインデックスを付けることができる length 属性があります。これは引数で行うことができるようです。配列？実際の開発では通常の配列として操作しますが、lengthやforループなどは非常に使いやすく、エラーも発生しません。
しかし、実際には配列 (Array) ではなく、NodeList です。 NodeList は配列ではありません。
なんと驚くことでしょう?

1. NodeList が配列ではないのはなぜですか?

NodeList が配列であるかどうかを確認します。おそらく、最も直接的な方法は、Array 独自のプッシュ メソッドとポップ メソッドを試すことです。

コードをコピー コードは次のとおりです:

varアンカー = document.getElementsByTagName("a");
var newEle = document.createElement("a");// new a element
anchors.push(newEle);//push
var element=アンカーs.pop();//pop

上記のコードかどうかは、自分でテストできますプッシュまたはポップ メソッドである場合、例外なく、プッシュまたはポップ メソッドが存在しないことを示すメッセージが表示されます。まだ質問がありますか?これで終わりですか？このような一方的なテストでは、Louzhu は落ち着いてリラックスすることができません。引数が配列ではないことを証明したのと同じ方法を使用して、NodeList が配列ではないことを証明できます。以下のコードを見てください:

コードをコピー コードは次のとおりです:

Array.prototype .testNodeList = "テストノードリスト"; //プロトタイプ属性を配列に追加します
function funcNodeList() {
var links = document.getElementsByTagName("a");
alert(links.testNodeList); >}
function test() {
alert(new Array().testNodeList); //#ff0000 とは何ですか? 🎜>test( ); //テストしてみます



上記の分析を通じて、NodeList が配列 (Array) ではないことを確認できます。では、コレクションを操作する習慣に従って NodeList を操作するにはどうすればよいでしょうか?

2. NodeList を配列のように操作する

NodeList は長さがあるので、for ループでインデックスして値を取得するのは簡単ではないでしょうか。笑、最も直接的なアイデアは次のとおりです。 g




コードをコピーします

コードは次のとおりです: var arr = new Array(); varアンカー = document.getElementsByTagName("a")

for (var i = 0; i var ele =アンカー[i ];
arr.push(ele); //arr は必要な配列です
}


まず、配列を作成し、NodeList を走査します。を追加し、配列変数に単一の要素をプッシュし、最後に配列変数を操作します。自分の知性が侮辱されたように感じますか?
上記は冗談ではありません。以下は Lou Zhu がインターネット上の Google で見つけたもので、2 行のコードで NodeList を Array に変換して使用できます。



コードをコピー

コードは次のとおりです。 varアンカー = document.getElementsByTagName("a"); var arr = Array.prototype .slice.call(anchors) ; //IE以外の通常のブラウザ

しかし、最も残念なことが起こりました。上記のコードは邪悪な IE では正しく動作せず、IE は「JScript オブジェクトが見つかりません」というプロンプトを表示します。
あなたは上記の分析を否定し、操作のために NodeList を Array に変換する必要はないと考えるかもしれません。実際、Lou Zhu は、どのようなプログラミング言語であっても、型変換は非常に賢明ではない行為であると個人的に信じています。最も一般的なものは、C# でのボックス化とボックス化解除、および数値データ変換ですが、これらにはパフォーマンス上の問題があり、注意しないと鉱山事故を引き起こす可能性があります。しかし、Lou Zhu はなぜ NodeList を単独の配列として扱うのでしょうか? NodeList を動的に変更する場合、NodeList を直接操作すると、気付かないうちに誤って制限エリアに入ってしまう可能性が高いためです。以下に例を示します。
(1)、HTML ドキュメントのフラグメント

リンク テスト

(2)、JavaScript テスト コード

コードをコピー コードは次のとおりです:

varアンカー = document.getElementsByTagName("a");
for (i = 0; i var ele= document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/"); .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 に感謝します)、その長さは変化し続け、増加します。とループが何度も繰り返され、最終的には無限ループになってしまいました。次のコードを使用すると、期待した効果と同じになります:

コードをコピーします コードは次のとおりです:

var links = document.getElementsByTagName("a");
varアンカー = null; //Array
try {
anchors = Array.prototype.slice.call(links) ;
}
catch (e) { //ie と互換性があります
anchors = new Array();
for (var i = 0; i < links.length; 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 = anchors.length; //変数を定義します(i = 0; i < len i ) { //ローカル変数 len 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 は新しいリンクを追加しますLink
}


ここまでで、ご質問のある方も無い方も、読んでいただきありがとうございます。アドバイスをお待ちしております。
作者: ジェフ・ウォン