JSの「document.getElementById().textContent」について質問

JavaScriptの「document.getElementById().textContent」という文章について質問が有ります。

この文章で「document.getElementById()」の部分は、
documentオブジェクトの中のgetElementById()メソッドを利用しているというのは分かります。
しかし、続けてtextContentプロパティが記述されていますが、これはどこのプロパティなのでしょうか？
documentオブジェクトの中に有るプロパティなのでしょうか？

私の考えでは、上の表記は厳密には
let a = document.getElementById("id名");
a.textContent;
であり、aにはid名で指定された要素が格納されますよね？
そして要素が格納されたaも実はオブジェクトであり、そのオブジェクトの中にtextContentプロパティが
JavaScriptでは標準で搭載さている、ということでしょうか？

またもう一つ質問で、
通常オブジェクトの中のプロパティやメソッドを参照する（呼び出す）時は、

オブジェクト名.プロパティ名
オブジェクト名.メソッド名()

と書きますが、上のdocument.getElementById().textContentの様に他にも

オブジェクト名.メソッド名().プロパティ名

と続けて記述する場合も良く見ます。
こういう表記を見かけて場合も厳密には

let 変数 = オブジェクト名.メソッド名();
変数.プロパティ名;

であり、最後のプロパティは別のオブジェクトに格納されたプロパティ
という解釈で宜しいでしょうか？

詳しい方がいましたらお手数ですが
ご教授お願いいたします。

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2020/05/05 19:45

メソッドチェーンと呼ばれる書き方ですね。

オブジェクトを返すメソッド(またはプロパティ)を、ドット表記で連続して記載することで、
左側から順番に「オブジェクトのメソッドを呼び出して戻り値のオブジェクトで置き換え」を繰り返します。

ご提示のプログラムの場合ですと、実行順序は以下のようになります。

var x = window.document.getElementById("foo").textContent;
↓
「メンバーへのアクセス」のドット表記は、演算子としては左から右の順に処理される
https://developer.mozilla.org/ja/docs/Web/JavaSc …
var x = ((window.document).getElementById("foo")).textContent;
↓
Window 型の document プロパティは Document 型のオブジェクトを返す
https://developer.mozilla.org/ja/docs/Web/API/Wi …
var x = ((Document型のオブジェクト).getElementById("foo")).textContent;
↓
Document 型の getElementById() メソッドは Element 型のオブジェクトを返す
https://developer.mozilla.org/ja/docs/Web/API/Do …
var x = (Element型のオブジェクト).textContent;
↓
Element(の親である Node)型の textContent プロパティは 文字列 を返す
https://developer.mozilla.org/ja/docs/Web/API/No …
var x = 文字列;
↓
変数 x に入る値は「現在のウィンドウ(window)内の、文書構造(document)から、特定の要素を探し出し(getElementById)、その要素中のテキスト表現(textContent)」の文字列

この回答へのお礼

非常に分かりやすいご説明、有難うございました。
成程、メソッドチェーンと呼ばれる書き方が有るんですね。
初めて知りました。引き続き頑張りたいと思います。

お礼日時：2020/05/13 15:32

No.3 回答者： tknakamuri 回答日時： 2020/05/06 14:39

>私の考えでは、上の表記は厳密には

>let a = document.getElementById("id名");
>a.textContent;
>であり、aにはid名で指定された要素が格納されますよね？
>そして要素が格納されたaも実はオブジェクトであり、
>そのオブジェクトの中にtextContentプロパティが
>JavaScriptでは標準で搭載さている、ということでしょうか？

document.getElementById() が返すのはオブジェクトの「参照」、
aに代入されるのも「参照」で、オブジェクトそのものではありません。

JavaScriptの「.」はオブジェクトの参照を介してメソッドやプロパティ
にアクセスするためのものです。

JavaScriptではオブジェクトそのものが変数に代入されることはありません。

let a={};
let b=a;

とすると、aとbは「ひとつの」空の辞書を指します。

この回答へのお礼

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

お礼日時：2020/05/28 22:47

No.1 回答者： artoo 回答日時： 2020/05/05 09:19

一般的には、「オブジェクト.メソッド名()」や、「オブジェクト.プロパティ名」は、オブジェクトです。

（下記注）
あなたは、「オブジェクト名.メソッド名()」とお書きですが、「変数名を書くのが本来」と思っているのでしたら、それは間違いです。
ドットの前には、「オブジェクト」を書くので、オブジェクトが代入された変数名でもいいし、オブジェクトを返す式でもいいです。

ということで、「厳密には、～～」とお書きの記述は厳密でも何でもなく、「そういう書き方も出来る」ということだけです。
let a = x + y + z; と書くか、let w = x + y; let a = w + z; と書くかの違いとちょうど同じです。

document.getElementById().textContent がわかりにくければ、(document.getElementById()).textContent と括弧が付いていると思えば良いです。

注：JavaScriptだと数値や文字列はオブジェクトじゃないので、オブジェクトじゃなくてそういう基本型の値を返すこともありますが。

この回答へのお礼

＞一般的には、「オブジェクト.メソッド名()」や、「オブジェクト.プロパティ名」は、オブジェクトです。
成程、だから連鎖させて書くことが出来るんですね。
ご教授、有難うございました。

お礼日時：2020/05/13 15:34