・リンク先に「DOMのノードリスト(HTMLCollectionやNodeList)の配列化」という記述があるのですが、意味が分からないので、教えてください
http://blog.livedoor.jp/eeu/archives/55316901.html
下記理解で合っているでしょうか?
・そもそも「JavaScript」と「DOM」は異なる概念
・JavaScript… ECMAScriptに基づく
・DOM … Document Object Model Level Specificationに基づく
・JavaScript … 「オブジェクト型」「プリミティブ型」に分類可能
・DOMオブジェクト … JavaScriptオブジェクトとは等価でない?
・NodeList … JavaScript配列オブジェクトとは等価でない?
http://jibun.atmarkit.co.jp/lskill01/rensai/dom0 …
・外見上は同じに見える「NodeList」「配列オブジェクト」判断の方法は? 前後の文脈から?
>HTMLCollection はノードのリスト
・NodeListとの違いは?
・リンク先は関係あるでしょうか? なぜオラクル?
http://docs.oracle.com/javase/jp/7/jre/api/plugi …
・もしかしてブラウザによって返す型が異なるのでしょうか?
・結局「HTMLCollection型」「NodeList型」どちらが正しいのでしょうか? あるいは同じ意味?
>戻り値
>Firefox, IEはHTMLCollection型のオブジェクト
>Google Chrome, OperaはNodeList型のオブジェクト
http://d.hatena.ne.jp/sandai/20100823/p1
No.2
- 回答日時:
・リンク先に「DOMのノードリスト(HTMLCollectionやNodeList)の配列化」という記述があるのですが、意味が分からないので、教えてください
NodeList等はJSのArrayを継承していないので、配列のメソッドが使えず、扱うに不便なことがよくあります。
JSの配列操作のメソッドは、制限が緩いので、いくつかは配列のようなオブジェクトに対しても適応可能です。
それを利用して、配列をコピーして新しい配列を作るメソッドを、NodeList等に適応すれば、純粋な配列に変換できることが期待できます。
ただ、コピーするメソッドというものはないので、複製して変化を起こすメソッドを、変化を起こさないよう指定して代わりに使います。
例えば、sliceメソッドに何も渡さない、arr.slice()は、arrをコピーすると同等の働きをします。
ただ、NodeList等は配列のメソッドをもってないので、関数を大元のArray.prototype.sliceから持ってきて、callでthis(処理対象)を挿げ替えます。
arr.slice()はArray.prototype.slice.call(arr)と書けるように、Array.prototype.slice.call(list)とすることで、listに対してsliceメソッドを適応でき、結果NodeList等を配列化することができます。
・そもそも「JavaScript」と「DOM」は異なる概念
・JavaScript… ECMAScriptに基づく
・DOM … Document Object Model Level Specificationに基づく
DOMは、仰るとおりJSとは分離されていて、JSに対しAPIが提供されている形になりますが、なんだかんだ言って今も昔もJSを一番重視しており、完全に別物とも言い切れません。
そもそも「JavaScript」という言葉自体の定義が「ECMAScript」や「DOM」に比べてあやふやです。
ECMAScript+DOM≒JavaScriptという見かたがされる時も多くあります。
・JavaScript … 「オブジェクト型」「プリミティブ型」に分類可能
・DOMオブジェクト … JavaScriptオブジェクトとは等価でない?
オブジェクトはオブジェクトですが、区別しようと思えばいろいろできます。
例えば今までは「ネイティブ」と「ホスト」という分け方がよく使われてきました。
語感でなんとなく意味はわかると思いますが、ESで定義されてなくて、ホスト環境で提供されるDOMオブジェクトは「ホスト」オブジェクトです。
また、最近では「ネイティブ」と「ホスト」は「一般的」と「特殊」という用語に置き換わっています。
何の事はないですが、DOMは「特殊」なオブジェクト、ただそれだけです。あまり深く考える必要はありません。
・NodeList … JavaScript配列オブジェクトとは等価でない?
・外見上は同じに見える「NodeList」「配列オブジェクト」判断の方法は? 前後の文脈から?
・HTMLCollectionとNodeListとの違いは?
NodeListとHTMLCollectionは微妙に異なりますが、あまり深く考えず、NodeListの方をメインとして、両者同じものとして考えていいです。
この2つについて知っておかないといけないことは、Arrayを継承していないので、配列のメソッドを使えない残念仕様ということだけです。
JSには今まで、仕様上外部からArrayを正当に継承出来なかったりしたので、このようなややこしい配列もどきが生まれたわけですが、ES6になってその部分が克服されたので、後に述べるように改善されようとしています。
・リンク先は関係あるでしょうか? なぜオラクル?
Java版のDOM実装仕様のページです。
・もしかしてブラウザによって返す型が異なるのでしょうか?
そうであったりそうでなかったりします。
気にせず、気にしないといけないようなことをしないのが一番です。
・結局「HTMLCollection型」「NodeList型」どちらが正しいのでしょうか? あるいは同じ意味?
2つともありますが、同じようなものです。
また、新しい仕様では、両者はArrayを正統に継承したElementsに一本化されることにもなりました。
既存のNodeList/HTMLCollectionが置き換えられることはありませんが、今後追加されるAPIではElementsが使われることになります。
つまり来年辺りからは3種類を扱っていかなければならなくなるわけですが、真APIはほとんどのケースで旧APIをより良く置き換えられるものなので、NodeList/HTMLCollectionを徐々に見なくて済むようになっていくとは思います。
また、既存のNodeListをArrayを継承させるよう仕様変更しようとする計画もありますが、これは実際テストしてみて既存のスクリプトで問題が出ないかどうかによるでしょう。
回答ありがとうございました。
>今まで、仕様上外部からArrayを正当に継承出来なかったりしたので、このようなややこしい配列もどきが生まれたわけですが、ES6になってその部分が克服されたので、後に述べるように改善されようとしています
・「配列もどき」という表現が分かりやすかったです
>来年辺りからは3種類を扱っていかなければならなくなるわけですが、真APIはほとんどのケースで旧APIをより良く置き換えられるものなので、NodeList/HTMLCollectionを徐々に見なくて済むようになっていくとは思います
・初めて知りました
・この辺り勉強したほうが良いかな、と思っていたのですが、そういう事情なら他の方を優先的に見ていきたいと思います
・大変参考になりましたー
No.1ベストアンサー
- 回答日時:
HTMLCollection
ブラウザが実装している DOM API の型で「生きて」いる順序付の連想配列
DOM が必要とする最低限の機能しかない
例: document.forms[0]
例: document.forms['x'] // <form name='x'>
NodeList
ブラウザが実装している DOM API の型で「生きて」いる配列、連想はできない
DOM が必要とする最低限の機能しかない
例: document.body.childNodes
例: document.querySelectorAll('img') // 例外的に生きてない
Array
JavaScript の型で、配列を表す
内蔵型なので動作が高速、かつ多機能
上記二つは「生きて」いるオブジェクトの型です。
つまりDOMを操作すると、即座にオブジェクトにも反映されてしまいます。
例: <form>要素を追加する → document.forms の数が増える
一般的に「生きて」いるオブジェクトは、処理しづらくアクセス性能も悪いので、
配列内容を Array 型のオブジェクトに投影して「生きて」ない配列にします。
例: Array.prototype.slice.apply(document.getElementsByName('hoge')).forEach(function(e){})
余談ではありますが、
DOM API は特定言語に依存しない仕様ですので、各言語ごとに実装があります。
ただ仕様書の付録として Java/ECMAScript の実装例があるぐらいこの二つの言語で多用されますので、
単純にDOMで検索すると Java の機能だと誤解するかもしれません。
JavaScript のほうを調べるなら、こちらをオススメします。あまり邦訳されていないのが欠点ですが。
https://developer.mozilla.org/ja/
回答ありがとうございました。
>「生きて」いるオブジェクトの型です。
>つまりDOMを操作すると、即座にオブジェクトにも反映されてしまいます。
>一般的に「生きて」いるオブジェクトは、処理しづらくアクセス性能も悪いので、
>配列内容を Array 型のオブジェクトに投影して「生きて」ない配列にします
・この説明大変分かりやすかったです
>DOM API は特定言語に依存しない仕様ですので、各言語ごとに実装があります
・初めて知りました
・びっくりしました
・大変勉強になりましたー
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか 2 2023/05/20 15:02
- JavaScript javascript で外部サイトにデータ入力させて自動でボタンを押すことは可能ですか? 1 2023/01/30 16:23
- PHP クラス 1 2022/08/08 15:12
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- Illustrator(イラストレーター) ワード。オブジェクトの一部分にグラデーションを塗るには。 2 2022/10/04 13:35
- Excel(エクセル) テキストの背後にあるオブジェクトとは 3 2023/01/03 20:22
- Illustrator(イラストレーター) 【シェイプ形成ツール】でうまく分割できない 1 2022/05/26 10:57
- Illustrator(イラストレーター) Illustratorでオブジェクトの色が勝手に変わって困っています。 4 2022/09/04 18:47
- Excel(エクセル) マクロでボタンにつける名前がどこに設定されているかわからないケースがありました。 1 2023/06/19 19:37
- PowerPoint(パワーポイント) パワーポイントのアニメーションについて 4 2023/06/14 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#のクラスで値渡しをする
-
VB.netでメソッドからコントロ...
-
Javaでブラウザ判定
-
Excel VBA 定数にオブジェクト...
-
ArrayListのデバッグ方法について
-
VBAでの[]
-
GridViewに行追加するには?
-
servletからjspへオブジェクト...
-
String型からlong型への変換は...
-
VBスクリプトでテキストファイ...
-
JSPでのArrayListの表示につい...
-
UTF-8のテキストファイルを開く...
-
Dispose()は、どんな時に使うの...
-
JSTのDateオブジェクトが作...
-
getHeigth,getWidthについて
-
VBA Workbooks.open
-
サーブレットコンテキストの意...
-
エクセルVBAで、条件に一致する...
-
「タイプ初期化子が例外をスロ...
-
インスタンス参照でアクセスで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBAでの[]
-
エクセルVBA 画像を貼り付ける...
-
サーブレットコンテキストの意...
-
C#のクラスで値渡しをする
-
Vba ListViewの行挿入に関して...
-
Excel VBA 定数にオブジェクト...
-
VB.netでメソッドからコントロ...
-
servletからjspへオブジェクト...
-
javaで、、、
-
VB.NETでのnothing の意義について
-
Dispose()は、どんな時に使うの...
-
ピクチャーボックスに点を打つ...
-
VBスクリプトでテキストファイ...
-
String型からlong型への変換は...
-
JSPでのArrayListの表示につい...
-
C#で親にイベントを投げる方法
-
MessageBox.Show(Me,…の「Me」...
-
エクセルVBA/SpecialCellsで特...
-
getParameter()について
-
VBS でのソート処理Excel2003
おすすめ情報