フロントエンド

GetElementsByClassNameはforEachを使用して、エラーの解決と理由を報告します



Getelementsbyclassname Uses Foreach Report Error Resolution



GetElementsByClassNameは、forEachを使用するとエラーを報告します。

Assi、悪い記憶は頭痛の種です。Array.prototype.forEach.call(els, function(el) {}このコード行だけを思い出せません...



この問題が発生するたびに、Baiduにメモをとる必要があります。

このコード行は、ソースを偽装します。 https://www.it1352.com/769506.html



元のテキストは次のように傍受されます。

JS：Array.forEachを使用してgetElementsByClassNameの結果を反復処理します（JS：Array.forEachを使用してgetElementsByClassNameの結果を反復処理します）

var els = document.getElementsByClassName('myclass') Array.prototype.forEach.call(els, function(el) { // Do stuff here console.log(el.tagName) }) // Or [].forEach.call(els, function (el) {...})

単なるポーターではないため、終了後に理由を説明します。



次のコードを使用します。

let els = document.getElementsByClassName('line-item') console.log(els)

次に、コンソールにアクセスして確認します。内容は次のとおりです。

HTMLCollection(3) [div#xx.line-item, div#cc.line-item, div#vv.line-item, xx: div#xx.line-item, cc: div#cc.line-item, vv: div#vv.line-item] length: 3 0: div#xx.line-item align: '' title: '' lang: '' translate: true dir: '' hidden: false accessKey: '' draggable: false spellcheck: true autocapitalize: '' contentEditable: 'inherit' isContentEditable: false inputMode: '' offsetParent: body offsetTop: 480 offsetLeft: 90 offsetWidth: 613

getElementsByClassNameを使用して取得したものは配列ではなく、HTMLCollectionであることがわかります。

HTMLCollectionとは何ですか？

w3schoolドキュメントの内容を見てみましょう。

HTMLCollectionは、HTML要素のコレクションを表すインターフェイスです。リストをトラバースできるメソッドと属性を提供します。

基本的なドキュメントが変更された場合、HTML DOMのHTMLCollectionは「ライブ」であり、それらの変更はすべてのHTMLCollectionオブジェクトを通じてすぐに表示されます。

次の各項目（およびそれらが指定する属性）は、HTMLCollectionを返します。

  • ドキュメント（画像、アプレット、リンク、フォーム、アンカー）
  • フォーム（要素）
  • 地図（エリア）
  • オプションを選択）
  • テーブル（行、tBodies）
  • tableSection（行）
  • 行（セル）

HTMLDocumentインターフェイスの多くのプロパティはHTMLCollectionオブジェクトであり、フォーム、画像、リンクなどのドキュメント要素にアクセスするための便利な方法を提供します。 form.elementsとselect.optionsはどちらもHTMLCollectionオブジェクトです。 HTMLCollectionは、Tableの行とTableRowのセルをトラバースする便利な方法も提供します。

上記のように、HTMLCollectionオブジェクトはメソッドを持つHTML要素のコレクションであり、ドキュメント内の位置またはid属性とname属性によって要素を取得するために使用できます。 JavaScriptでは、HTMLCollectionオブジェクトは読み取り専用配列のように動作します。 JavaScriptの角かっこを使用すると、item（）メソッドやnamedItem（）メソッドを呼び出さなくても、HTMLCollectionオブジェクトに番号または名前でインデックスを付けることができます。

HTMLCollectionオブジェクトは読み取り専用であり、JavaScript配列構文を使用しても、新しい要素を追加することはできません。

HTMLCollectionオブジェクトはNodeListオブジェクトと非常に似ていますが、前者は名前と番号の両方でインデックスを付けることができます。

w3cドキュメントを読んだところ、これはオブジェクトに似ていることがわかりました。そのため、forEachを直接使用することはできず、適切に変換する必要があります。