JavascriptでHTMLの要素を取得する方法:getElementByIdメソッドの使い方

Javascriptはスクリプト内だけではなくHTML要素も操作することができます。
HTML要素を操作するにはJavascriptでHTML内の要素を取得する必要があります。
要素の取得の方法の一つとしてgetElementByIdメソッドがあります。
このメソッドはHTML内のid属性を持つ要素を指定して取得します。
書式は以下のようななります

取得する範囲.getElementById(取得するid属性の名前).取得する属性


例として

document.getElementById("name").value

documentはHTML全体を範囲としてvalueはname要素に入力された値です（valueはinput要素の属性となります）。
この例はHTML全体のうちnameという名前のid属性を持つ要素に入力されたvalueを取得するとも意味します。
取得する範囲はdivタグで区切った部分も指定できます。
また取得する属性の部分は省略すると要素内の全属性を取得します。


使い方の例としては

var a = document.getElementById("name").value;

これでvalueの値を変数aとして扱えます。

今回はid属性を使って要素を取得していますが、class要素を使って要素を取得するgetElementsByClassNameメソッドというものもあります。
ただしclass属性は同じ名前が複数ある場合があるので、そのメソッドの扱い方は今回のgetElementByIdメソッドとは少し異なります。



今回はJavascriptを用いてスタイルの変更とp要素を追加するスクリプトを作成しました



innerHTMLはJavascriptでHTMLの要素の値を取得変更する属性です。
要素名と合わせても使いますが今回は変数aを用いています。
スタイルの部分はそのまま変更しています。