[解決済み] HTMLCollection、NodeList、オブジェクトの配列の違いについて
質問
DOMに関して、HTMLCollections、オブジェクト、配列の間でいつも混乱しています。 例えば...
-
の違いは何ですか?
document.getElementsByTagName("td")
と$("td")
? -
$("#myTable")
そして$("td")
はオブジェクト(jQueryオブジェクト)です。 console.logには、なぜかその横にDOM要素の配列も表示されており、オブジェクトでもなく配列でもないのでしょうか? - とらえどころのない "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 メソッド/プロパティによって返されるだけです。
関連
-
[解決済み】event.stopPropagationとevent.preventDefaultの違いは何ですか?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] オブジェクトのためのマップ関数(配列の代わりに)
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] JavaScriptで2つの配列の差を取得する方法は?
-
[解決済み】JavaScriptで2つの配列を結合し、項目の重複を排除する方法
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?