日々のメモ帳

プログラミングで学んだ事や趣味でやっている事などを記録しています。

JavaScriptの勉強 4日目(オブジェクト その2)

 昨日の続き。 

 

JavaScriptからHTMLを操作する

 

▼ document.getElementById()の正体

 HTML文章をブラウザで実行すると、ブラウザはHTML文章全体を示すオブジェクトを作成し、そのオブジェクトへの参照を広域変数documentに格納します。これはHTMLブラウザの約束事であり、どのブラウザでも同じ動きになります。documentオブジェクトには様々なプロパティ・メソッドが用意されています。

 getElementByIdメソッドはその一つで、引数で指定されたid属性を持つ要素を返します。getElementByIdメソッドから返される値は引数によって異なります。span要素のidを指定したらspan要素が、input要素のidを指定したらinput要素が返されます。span要素の場合は画面に表示する内容はtextContentプロパティで、input要素の場合は入力値はvalueプロパティで参照できます。

 

▼まとめ

 ①document 

  documentオブジェクトへの参照を保持する広域変数。


 ②document.getElementById(id) 

  documentオブジェクトのメソッド呼び出し。引数に渡されたidの要素オブジェクトを返す。


 ③document.getElementById(id).textContent = 表示する値

  document.getElementById(id)が返したオブジェクトのプロパティに値を代入することで画面の表示を更新。

 

JavaScriptからCSSを操作する

 コードはGitHubにある「オブジェクト2.html」です。

 

f:id:kouzi_prog:20180513111104p:plain

 

 「書く」ボタンを押すと、色と長さが変化します。これはJavaScriptからCSSの値を操作しているからです。

 

▼動作手順

 

 HTMLでは以下のように色と長さを初期化しています。

 

 <p id="pencil" style="background-color: red; width: 5cm;"></p>

 

 次に、stroke関数の(A)で「id = "pencil"」という要素、すなわち<p>要素のオブジェクトを取得しています。要素のCSS特性はstyleプロパティで参照されるオブジェクトに格納されています。そのオブジェクトの中の個々のCSS特性の値を参照すれば現在のCSS特性の値が取得でき、値を代入するとCSS値が更新されます。

 

function stroke() {function stroke() {       

pen.draw();       

var pencil = document.getElementById("pencil");     ……(A)

pencil.style.width = pen.length + "cm";       

pencil.style.backgroundColor = pen.color;       

pencil.textContent = "色=" + pen.color + "長さ=" + pen.length;   

 } 

 

▼余談 

f:id:kouzi_prog:20180513112341p:plain

 上で挙げた「オブジェクト2.html」の動作確認をしている時の画像です。予想した挙動をしない場合、自分でエラーの原因となっている箇所に気付くのも大事だとは思いますがデベロッパーツールを使うとこの画像のようにおかしい所を教えてくれるので便利です。