BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] HTMLCollection、NodeList、オブジェクトの配列の違いについて

2022-10-25 02:12:49

質問

DOMに関して、HTMLCollections、オブジェクト、配列の間でいつも混乱しています。 例えば...

  1. の違いは何ですか？ document.getElementsByTagName("td") と $("td") ?
  2. $("#myTable") そして $("td") はオブジェクト（jQueryオブジェクト）です。 console.logには、なぜかその横にDOM要素の配列も表示されており、オブジェクトでもなく配列でもないのでしょうか？
  3. とらえどころのない "NodeLists" とは何ですか、そしてどのように私は1つを選択するのですか？

また、以下のスクリプトの解釈もお願いします。 

[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Collections?</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(function(){
                console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
                console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
                console.log('Node=',Node);
                console.log('document.links=',document.links);
                console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
                console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
                console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
                console.log('$("#myTable")=',$("#myTable"));
                console.log('$("td")=',$("td"));
            });
        </script>
    </head>

    <body>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <table id="myTable">
            <tr class="myRow"><td>td11</td><td>td12</td></tr>
            <tr class="myRow"><td>td21</td><td>td22</td></tr>
        </table>
    </body> 
</html>

どのように解決するのですか？

まず NodeList と HTMLCollection .

どちらのインターフェースも コレクション の DOM ノードのコレクションです。両者は、提供するメソッドと格納できるノードの種類が異なります。一方 NodeList があらゆる種類のノードを含むことができるのに対し HTMLCollection はElementノードのみを含むと仮定されています。

また HTMLCollection と同じメソッドを提供します。 NodeList というメソッドを提供し、さらに namedItem .

コレクションは、複数のノードにアクセスしなければならないときに常に使用されます。例えば、ほとんどのセレクタメソッド（例えば getElementsByTagName など) は複数のノードを返しますし、すべての子ノードへの参照を得る ( element.childNodes ).

より詳細な情報は DOM4 仕様 - コレクション .

とはどのような違いがあるのでしょうか？ document.getElementsByTagName("td") と $("td") ?

getElementsByTagName は、DOMインターフェースのメソッドです。タグ名を入力として受け取り、そのタグに対応する HTMLCollection (を返します（参照 DOM4 仕様 ).

$("td") はおそらくjQueryです。任意の有効なCSS/jQueryセレクタを受け付け、jQueryオブジェクトを返します。

標準のDOMコレクションとjQueryのセレクションの最大の違いは、DOMコレクションは 通常 ライブであること（すべてのメソッドがライブコレクションを返すわけではありませんが）、つまり、DOM への変更がコレクションに影響する場合、それが反映されることです。それらはまるで ビューのようなものです。 のようなものです。一方、jQuery のセレクションは、関数が呼び出された瞬間の DOM ツリーのスナップショットです。

console.logはなぜDOM要素の配列も横に表示されるのでしょうか、オブジェクトではなく配列ではないのでしょうか？

jQueryのオブジェクトは 配列のような オブジェクトです。つまり、数値のプロパティと length プロパティを持ちます (配列はそれ自体がオブジェクトであることに留意してください)。ブラウザは、配列や配列に似たオブジェクトを特別な方法で表示する傾向があります。 [ ... , ... , ... ] .

NodeLists" とは何でしょうか？

私の回答の最初の部分を参照してください。あなたは を選択する NodeList の場合、それらは 結果 である。

私が知る限りでは NodeList をプログラム的に作成する方法（つまり、空のものを作成し、後でノードを追加する）さえなく、それらはいくつかの DOM メソッド/プロパティによって返されるだけです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します