JavaScriptにおけるメソッドとプロパティのチェーン

例えば、以下のような入力欄があるとします：

html<input id="elem" value="text">

入力欄のテキストを画面に表示してみましょう：

javascriptlet elem = document.querySelector('#elem');
console.log(elem.value); // 'text' と表示されます

ご覧の通り、まず要素をその id で取得し、 その要素を変数 elem に代入してから、 その変数からプロパティ value を画面に表示しています。

実際には、変数 elem を導入せずに、 次のようにドットでチェーンを構築することができます：

javascriptconsole.log( document.querySelector('#elem').value ); // 'text' と表示されます

同様に、チェーンを使って属性の書き換えも行えます：

javascriptdocument.querySelector('#elem').value = 'www';

html<img id="image" src="avatar.png">

javascriptlet image = document.querySelector('#image');
console.log(image.src);