取得した要素から使えるメソッドの確認方法を教えてください。

console.dirを使い、取得した要素がどんなメソッドがあるか確認しました。
しかしプロパティはいくつもありましたが、メソッドは見つかりません。

確認できる方法があれば教えて頂きたいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title></title>
6    <link rel="stylesheet" href="style.css" />
7  </head>
8  <body>
9
10    <div>要素</div>
11    <script src="main.js"></script>
12  </body>
13</html>

js
1const el = document.querySelector("div");
2console.dir(el);
3// メソッドを確認したが無い
4
5el.appendChild(document.createElement("li"));
6// しかしメソッド使える

行動規範の内容に同意します

回答3件

実はconsole.dir()でメソッドも表示されます。ただし奥底にあるのでとても発見しにくいですね。

console.dir()の展開1回目の結果の一番下 [[Prototype]]: HTMLDivElement を展開します。省略マーク (...) があったらクリックします。一番下の [[Prototype]]: HTMLElement を展開します。さらに [[Prototype]]: Element、[[Prototype]]: Node まで展開するとようやく appendChild が表示されます。

console.log(el.constructor) をすると HTMLDivElement と表示されます。これがDOMのインタフェイス名なので、「MDN HTMLDivElement」で検索して https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement にたどりついて、そこのリンクから HTMLElement Element Node のページを読むのがまだマシかもしれません。

投稿2021/10/16 08:21

int32_t

総合スコア21695

bag_ai

2021/10/16 10:53

確かにこちらのサイトから見た方が早いですね。これからはMDNから確認するようにします。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

JavaScriptにおいて、メソッドとは、関数であるプロパティでのことです。メソッド呼び出し(obj.method(args, ...)という書き方)は、オブジェクトからその名前のプロパティを探し出し、そのプロパティの値を関数として呼び出す事になります。では、この「オブジェクトからその名前のプロパティを探し出す」というのは、どういう動作をするのかです。

オブジェクトからその名前のプロパティを探し出すことは、次のような動作になります。

最初にオブジェクトが直接持っているプロパティからの名前のものがあるか探します。もし、見つかれば、そのプロパティの値を返し、処理が終了します。
見つからなければ、オブジェクトのプロトタイプ([[Prototype]])であるオブジェクトへ探索対象が移り、プロトタイプであるオブジェクトが直接持っているプロパティからの名前のものがあるか探します。もし、見つかれば、そのプロパティの値を返し、処理が終了します。
それでも見つからなければ、先程のプロトタイプであるオブジェクトのプロトタイプであるオブジェクトへ探索対象が移り、同じようにプロパティを探します。以下、プロトタイプがnullになるまで、繰り返します。
見つからずに、プロトタイプがnullになってしまった場合、undefinedを返し、処理が終了します。

この動作をプロトタイプチェーンと言います。オブジェクトのプロトタイプ([[Prototype]])はObject.getPrototypeOf()で取得でき、一般的に、コンストラクタ関数のprototypeプロパティのオブジェクトです。そして、コンストラクタ関数のprototypeプロパティのオブジェクトのプロトタイプはは親のコンストラクタ関数のpurototypeプロパティになっています。最終的に、Object.prototypeに遡り、Object.getPrototypeOf(Object.prototype)はnullになっていまうす。

さて、div要素を表示したのにメソッドが見つからなかったと言うことですが、div要素自体はメソッドを直接持っていなくても、プロトタイプチェーンを辿っていけば、そのメソッドを呼び出せることになります。実際に、divのプロトタイプを辿ると次のようになっています。

div -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype -> null

※コンソールでの表示ではprototypeが省略されている場合があります。
※Chromeですと、console.dirで表示させて、[[Prototype]]というところ展開することで辿れます。ただ、最後のOjbectはちょっと特殊みたいです。

Node.prototypeがappendChildメソッドを持っています。el.appendChild()と書いた場合、Node.prototype.appendChildメソッドが(thisをelとして)呼び出されることになります。

投稿2021/10/16 08:36

編集2021/10/16 08:36