nodeオブジェクトとは

Question

javascriptにおけるnodeオブジェクトとは、何なのでしょうか。
持っている書籍には、単語が断片的に載っているだけだったのでネットで調べてみると、
全ＤＯＭの主要なデータ型であり、木構造の文章(htmlファイルやxmlファイル？)の一つのノードを表す、とのことですがさっぱりわかりません。
先ほどの書籍には、getElementTagName()が返す値が、Nodeオブジェクトの配列ではなく、Nodelistオブジェクトであると記述してあるので、何かしらの配列を持っているということだけ理解しています。

データ型ということは、intやstringの親戚ということですか。木構造の文章の一つのノードを表す、というのは、要素ノードやテキストノードなどの一つ一つのノードがNodeオブジェクトということですか？
もう少し噛み砕いて説明するとどういう風になりますか。
https://www.google.co.jp/webhp?hl=ja&gws_rd=cr,ssl&ei=ISphV-iAPKPxmAWsyrjADA#q=NODE%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%80%80%E3%81%A8%E3%81%AF&hl=ja&start=0

Answer 1

getElementsByTagName の返り値

getElementsByTagName の返り値は HTMLCollection のインスタンスです。
DOM3 までは「liveな NodeList」でしたが、DOM Standard (DOM4) からは「liveな HTMLCollection」として再定義されました。
書籍上の説明で getElementsByTagName の返り値が NodeList とされているなら、その書籍は情報が古いです。

HTMLCollection

HTMLCollection のインスタンスは数字の添え字で参照できるオブジェクト郡ですが、扱えるプロパティは length, item, namedItem の3種類しかありません。
参照方法こそ配列と同じですが、扱える関数が非常に少なく、いってみれば配列の機能縮小版です。
なお、特別な規定がなければ、HTMLCollection のインスタンスはliveです。

• 4.2.10.2. インタフェース HTMLCollection - DOM Standard 日本語訳

Node とは

Node は Interface の一種で JavaScript ではプロトタイプとなるオブジェクトにあたります。
書籍ではデータ型と説明されていたそうですが、String 型、Object 型に並ぶ「型の名前」ではありません。
Object 型の種類を表す指標には [[Class]] とインスタンス元(プロトタイプ)があり、Node はそのどちらにもなる可能性があります。

var pCollection = document.getElementsByTagName('p');
console.log(Object.prototype.toString.call(pCollection)); // [object HTMLCollection]
console.log(pCollection instanceof HTMLCollection); // true
console.log(pCollection instanceof NodeList); // false
console.log(pCollection instanceof Node); // false

var p = pCollection[0];
console.log(Object.prototype.toString.call(p)); // [object HTMLParagraphElement]
console.log(p instanceof HTMLParagraphElement); // true
console.log(p instanceof HTMLElement); // true
console.log(p instanceof Element); // true
console.log(p instanceof Node); // true
console.log(p.__proto__.__proto__.__proto__.__proto__ === Node.prototype);  // true

このコードがわからないようでしたら下記用語について一通り調べてみてください。

• プロトタイプチェーン
• インスタンス
• コンストラクタ
• new 演算子
• Object.prototype.toString
• __proto__

この辺りの知識がないと、「Node とは何か」を理解するのは難しいと思います。

Re: aaaaaaaa さん

Comments

[aaaaaaaa]

ご回答有難うございました。DOM4からhtmlcollectionになったのですね。勉強になりました。重ね重ね質問させていただきますが、

プロトタイプチェーンは、あるオブジェクトのメンバ(プロパティの読み込みやメソッドの呼び出し)を探すときの仕組みで、当該のインスタンスになければ__proto__という親要素から引き継いだオブジェクトの参照をもつプロパティからメンバ探し、そこにもなければ、先ほどの__proto__に入っていたオブジェクトの__proto__が参照しているオブジェクトを探し…と続いていき、object.prototypeという終着駅までメンバを探すもので、所謂phpでいう所のクラス(利用するオブジェクトの設計図のようなもの)的な位置にいるのがコンストラクタで、これをnewすることでコンストラクタやコンストラクタのプロトタイプが持つメンバを引き継いだ、参照したオブジェクトが作れるもの。
という、少々間違っているかもしれませんがこのような認識を持っております。
ここまでであればnodeについての理解は、深まりますか。

[think49]

「親要素から引き継いだオブジェクトの参照をもつプロパティ」が怪しい感じですが、それ以外は理解できていると思います。
プロトタイプチェーンでは親子関係はありませんし、「要素」の概念もありません。
(要素といえば「DOMの要素ノード」「HTMLの概念としての要素」「配列の要素」が想定されます)
__proto__ は [[Prototype]] を指します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
Object.prototype.toString, [[Class]] について学べばNodeは元よりオブジェクトについても理解が深まると思います。

[think49]

> object.prototypeという終着駅までメンバを探す
オブジェクトの終着点が Object.prototype であるという規定はDOMにはありませんので実装依存です。
だからこそ、Object.prototype.toString.call(pCollection) のように Function#call を併用します。

[aaaaaaaa]

ご返答有難うございます。プロトタイプ関連を学ぶ上でこのプロトタイプ継承に使われるチェーンを解かりやすく親子のようなものと表現してあったものを見かけたので、てっきり親子関係があると思っておりましたが、親子関係はないのですね。勉強になりました。

Answer 2

木構造というのは、木のように枝分かれしていく構造のことです。
例えば、HTML から HEAD や BODY が枝分かれし、BODY からさらに P や H1 や TABLE が分かれるように。
木を構成する一つ一つのデータをノード(節)と言います。

配列というのは、線形の構造です。
つまり、データが一直線に並びます。
木の場合は、枝分かれしていきます。
これは「木構造」で画像検索されたら一発でわかると思います。

HTML を木構造にした時、そのノードを表すのが Node オブジェクトで、Node オブジェクトを配列のように線形に並べたものが Nodelist です。

Comments

[aaaaaaaa]

ご回答有難うございました。
重ね重ね質問をして申し訳ありませんが、
>>HTML を木構造にした時、そのノードを表すのが Node オブジェクトで
そのノード、というのが、>>木を構成する一つ一つのデータということですか。
つまり木構造を構成する一つ一つのノードは、オブジェクトでもある、ということで合っておりますか。

[Zuishin]

細かいことを言えばきりがありませんが、大まかに言ってその通りです。

[Zuishin]

おそらく、質問者さんは色んな概念を一度に学習しようとして、切り分けができていないのだと思います。

木構造と HTML とオブジェクトの三つは本来無関係な概念で、たまたま HTML を処理するのに JavaScript は木構造とオブジェクトを採用しているだけに過ぎません。

混乱されているのであれば、
1 オブジェクト
2 木構造
3 DOM
の順に理解を深めていかれたら良いのではないかと思います。

もちろん、実践を伴う方が学習は進みますので、きっちりこの順に一つ一つ終わらせるというのはかえって効率が悪くなるかもしれませんが、オブジェクトの理解に対する優先順位をもう少し上げてみてください。

[aaaaaaaa]

ご返答有難うございました。