オブジェクトの構造がどうなっているか。

Question

前提・実現したいこと

1つの変数にHTML要素を入れたり、プロパティを入れられたりするのですが、
これはどういったオブジェクトの構造になっているのでしょうか？

試したこと

$(function() {
	var myobj = $("<p>サンプル</p>");
	myobj.name = "テスト";
	$("body").append(myobj);
	console.log(myobj.name);  //テスト
	console.log(myobj);
});

myobjのHTML要素がappendされて、nameプロパティにテストが格納されているのを確認しました。
nameプロパティに値が格納されているのはわかりますが、HTML要素はどのように格納されているのかが不思議です。
0プロパティに、p要素が入っているみたいなログが取れてますが、
それならばなぜ、0プロパティを指定せず、
$("body").append(myobj);
でappendできてしまうのでしょうか？
このようなオブジェクトの構造に関して、ドキュメント等、ご教示いただきたいです。

Answer 1

jQueryオブジェクト

var myobj = $("<p>サンプル</p>");

myobj には「jQueryオブジェクト」が入っています。
jQueryオブジェクトは疑似配列で数字添え字の要素に「要素ノード」が格納されます。

• Types | jQuery API Documentation
• jQuery( html [, ownerDocument ] ) - jQuery API Documentation

jQuery.prototype.append()

$("body").append(myobj);

$("body") にも「jQueryオブジェクト」が格納されています。

• jQuery( selector [, context ] ) - jQuery API Documentation

.append() は引数がjQueryオブジェクトだったなら、jQueryオブジェクト内の全ての要素ノードを挿入します。

• .append() | jQuery API Documentation

console.dir()

console.log(myobj);

オブジェクトを確認するなら、console.dir() がより分かりやすいと思います。

資料

このようなオブジェクトの構造に関して、ドキュメント等、ご教示いただきたいです。

• 基本的にはjQuery公式ドキュメントを参照して下さい。
• 公式ドキュメントで足りない部分は、圧縮されていないjquery.jsのコードを参照して下さい。

もし、「要素ノード」や「DOMツリー」等の文言が分からない状態であれば、DOMについても学習して下さい。

• ドキュメントオブジェクトモデル (DOM) - Web API | MDN
• JavaScript初級者から中級者になろう — uhyohyo.net

Re: tkshp さん

Comments

[tkshp]

ご回答ありがとうございます。
詳しいご回答ありがとうございます、ベストアンサーにさせていただきました。
勉強になりました、ありがとうございます。

Answer 2

まず、myobj自体はjQueryオブジェクトになっています。.appendはjQueryのメソッドなので、jQueryオブジェクトをそのまま使えます。

そして、JavaScriptのオブジェクトには、勝手なプロパティを足すことが可能です。

Comments

[tkshp]

ご回答ありがとうございます。
とても勉強になりました。
jQueryオブジェクトとJavaScriptオブジェクト、両方の機能が働いていたのですね。

[tkshp]

すみません、より詳しいご回答をいただいたのでベストアンサーを移させていただきます。