JavaScriptにおけるメソッドとプロパティのチェーン
例えば、以下のような入力欄があるとします:
<input id="elem" value="text">
入力欄のテキストを画面に表示してみましょう:
let elem = document.querySelector('#elem');
console.log(elem.value); // 'text' と表示されます
ご覧の通り、まず要素をその id で取得し、
その要素を変数 elem に代入してから、
その変数からプロパティ value を画面に表示しています。
実際には、変数 elem を導入せずに、
次のようにドットでチェーンを構築することができます:
console.log( document.querySelector('#elem').value ); // 'text' と表示されます
同様に、チェーンを使って属性の書き換えも行えます:
document.querySelector('#elem').value = 'www';
以下のコードがあるとします:
<img id="image" src="avatar.png">
let image = document.querySelector('#image');
console.log(image.src);
上記のコードを、変数 image を導入する代わりに
チェーンを使用するように書き換えてください。