
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ベストアンサー
- 回答日時:
メソッドチェーンと呼ばれる書き方ですね。
オブジェクトを返すメソッド(またはプロパティ)を、ドット表記で連続して記載することで、
左側から順番に「オブジェクトのメソッドを呼び出して戻り値のオブジェクトで置き換え」を繰り返します。
ご提示のプログラムの場合ですと、実行順序は以下のようになります。
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)」の文字列
非常に分かりやすいご説明、有難うございました。
成程、メソッドチェーンと呼ばれる書き方が有るんですね。
初めて知りました。引き続き頑張りたいと思います。
No.3
- 回答日時:
>私の考えでは、上の表記は厳密には
>let a = document.getElementById("id名");
>a.textContent;
>であり、aにはid名で指定された要素が格納されますよね?
>そして要素が格納されたaも実はオブジェクトであり、
>そのオブジェクトの中にtextContentプロパティが
>JavaScriptでは標準で搭載さている、ということでしょうか?
document.getElementById() が返すのはオブジェクトの「参照」、
aに代入されるのも「参照」で、オブジェクトそのものではありません。
JavaScriptの「.」はオブジェクトの参照を介してメソッドやプロパティ
にアクセスするためのものです。
JavaScriptではオブジェクトそのものが変数に代入されることはありません。
let a={};
let b=a;
とすると、aとbは「ひとつの」空の辞書を指します。
No.1
- 回答日時:
一般的には、「オブジェクト.メソッド名()」や、「オブジェクト.プロパティ名」は、オブジェクトです。
(下記注)あなたは、「オブジェクト名.メソッド名()」とお書きですが、「変数名を書くのが本来」と思っているのでしたら、それは間違いです。
ドットの前には、「オブジェクト」を書くので、オブジェクトが代入された変数名でもいいし、オブジェクトを返す式でもいいです。
ということで、「厳密には、~~」とお書きの記述は厳密でも何でもなく、「そういう書き方も出来る」ということだけです。
let a = x + y + z; と書くか、let w = x + y; let a = w + z; と書くかの違いとちょうど同じです。
document.getElementById().textContent がわかりにくければ、(document.getElementById()).textContent と括弧が付いていると思えば良いです。
注:JavaScriptだと数値や文字列はオブジェクトじゃないので、オブジェクトじゃなくてそういう基本型の値を返すこともありますが。
>一般的には、「オブジェクト.メソッド名()」や、「オブジェクト.プロパティ名」は、オブジェクトです。
成程、だから連鎖させて書くことが出来るんですね。
ご教授、有難うございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
エクセル2010のvbaについて
-
JSPの処理の途中で、JavaScript...
-
PowerPointで時計表示
-
ASP(VBS) ←→ JavaScript の変数...
-
エクセルVBA/ Formatで文字列が...
-
if(1){...}とはどういうことで...
-
javascript で外部サイトにデー...
-
以下のコードを実行しても、オ...
-
アクセスのフォームでタイマー...
-
〔Excel:VBA〕マクロの実行が異...
-
VBAによる第3、4水準文字の判定...
-
フォルダを自動で開く
-
JavaScriptで ブラウザの閉じる...
-
javascriptからサーバサイドの...
-
VBA ステータスバー DoEvents
-
動的ファイルの最終更新日を取...
-
二択質問作ってその成績表を横...
-
JavaScriptでフォームの入力項...
-
VB.netの重複データ数カウント...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
Webページ中の javascript をVB...
-
node.jsのシェル上で
-
for each for in
-
フォルダ内のファイル名を取得...
-
エクセル2010のvbaについて
-
自サーバに置いたWEBページから...
-
画面間でのJavaScrip...
-
JavaScriptで複数のプロパティ...
-
jquery か javascript で json ...
-
IEのお気に入り表示の切り替...
-
event.srcElementの動的設定
-
PHPで定義した変数を引数として...
-
各ブラウザオブジェクトの使用頻度
-
Javascript; フィールドの属性変更
-
for...inのプロパティ取り出し...
-
レイヤーとリストボックスの件...
-
CSSのクラスを動的に変更 classで
-
CGIを呼び出した場合の戻り値を...
-
strictモードでなぜエラーにな...
おすすめ情報