プロパティのプロパティとは

Question

下記のソースは、liの親要素を取得している所です。

<div id="a">
<ul id="m">
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>
</div>

var ul_id = document.getElementById("m");
var elem = ul_id.parentNode;
console.log(elem.id);//a
console.log(elem)//HTMLのソースが表示される。
console.log(elem.length);//undifinedと表示される。

下記のソースは、liの数を取得している所です。

<ul id="n">
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>

var ul_id = document.getElementById("n");
//上記で取得した#ul_id内の要素の数をli_lengthに代入。.lengthを外すと#ul_idの子要素のみがリストアップされる。
var li_length = ul_id.children.length;
console.log("ul",ul_id,"liの数",li_length);//3

elemの前に付いている.idは、今回の場合、親要素のidを指し.lengthの場合は、liの数を指しています。ここで二つ疑問なのですが、ある子ノードの親ノードを指すelemプロパティと子要素のリストを返してくれるchildrenプロパティのあとにつく.idと.lengthは、何者ですか。
メソッドのあとにプロパティを指定できたり、jqueryオブジェクトを返すメソッドを繋げたりするメソッドチェーンは、知っておりますがプロパティのあとにプロパティが付く(elem.idやul_id.children.lengthなど)ものは知りませんでした。いったい何者なのでしょうか。

また、elemプロパティでも.lengthが使えるのかと思ったら使えませんでした。parentNodeでは、使えずchildrenでは使えるみたいですが、いったい何が使えて何が使えないのでしょうか。
○○は.lengthを使える、■■は、.lengthを使えない、などのように早見表のようなものは無いのでしょうか。

Answer 1

ブラウザ付属の開発者ツール

console.dir でオブジェクトが持つプロパティを得ることが可能です。
__proto__ を追えば、[[Prototype]] 上にあるプロパティも確認できます。

<div id="a">
  <ul id="m">
    <li>aa</li>
    <li>aa</li>
    <li>aa</li>
  </ul>
</div>

<script>
'use strict';
console.dir(document.getElementById('a'));
</script>

また、Google Chrome をお使いなら、ページ上の要素を右クリックして [検証] で DOM ツリー上の要素を選択し、[Properties] タブで各 Interface のプロパティを確認できます。
この機能は最近のブラウザなら大抵実装されていると思いますので試してみるといいと思います。

DOM

仕様としては下記2つの文書を読めば、大体は追えます。

• 「DOM Level 2 HTML
• DOM Standard 日本語訳

div要素ノードなら「HTMLDivElement -> HTMLElement -> Element -> Node」のようにプロトタイプチェーンが働くので順番に追ってみてください。

Re: aaaaaaaa さん

Answer 2

「elm」は「id="m"の要素の親要素」で、これはhtmlエレメントです。
プロパティの「id」はhtmlエレメントが持っているプロパティになります。
htmlエレメントの各プロパティについては以下を参照されるとよいと思います。

HTMLElement - Web API インターフェイス | MDN

「ul_id.children」で取得できるのは配列です。
配列オブジェクトには「length」というプロパティが定義されています。
配列のプロパティについてはこちらをどうぞ。

Array.prototype - JavaScript | MDN

Comments

[think49]

> 「ul_id.children」で取得できるのは配列です。
children が返すものは HTMLCollection であって配列ではありません。
なので、Array.prototype 上に存在するプロパティを利用できません。
https://triple-underscore.github.io/DOM4-ja.html#dom-parentnode-children

[tkturbo]

> children は HTMLCollection であって配列ではありません。
ぬおお、誤認識してましたorz