JavaScript初級講座

document.getElementsById("id名");

指定されたidを持つ要素のElementオブジェクトを返します。

Elementオブジェクト.style

HTML要素のstyle属性を変更します。
styleの後ろに設定したいCSSプロパティ名を記述し、文字列の値を代入して変更します。
CSSプロパティ名が-(ハイフン)で繋がれている場合は、-(ハイフン)を消して後に続く文字の頭を大文字にします。

// 文字色を赤に変更
Elementオブジェクト.style.color = "red";

// 背景色を青に変更 
Elementオブジェクト.style.backgroundColor = "blue";

Elementオブジェクト.textContent

HTML要素の文字列の参照と変更を行います。
textContentを変数などに代入すると、今表示されている文字列を格納する事ができます。
textContentに文字列を代入すると、その要素の文字列を変更します。

// HTML要素の文字列をhogeに変更
Elementオブジェクト.textContent = "hoge";

// hogeと出力 
console.log(Elementオブジェクト.textContent);

Elementオブジェクト.innerHTML

HTML要素をタグまで含めた取得・変更を行います。
innerHTMLを変数などに代入すると、今表示されているタグまで含めた文字列を格納する事ができます。
textContentでは「<div style="color:red;">hoge</div>」という文字列を代入してもそのまま表示されるだけですが、 innerHTMLはタグのまま代入が可能です。

// HTML要素の表示を、赤文字で指定したdivタグで囲ったhogeに変更
Elementオブジェクト.innerHTML = "<div style="color:red;">hoge</div>";
        
// <div style="color:red;">hoge</div>と出力
console.log(Elementオブジェクト.innerHTML);

Elementオブジェクト.appendChild(追加したいElementオブジェクト)

Elementオブジェクトの末尾に「追加したいElementオブジェクト」を追加する事ができます。
追加したいElementオブジェクトは 「document.createElement("タグ名");」 を使って事前に準備しておく必要があります。
詳しい使い方は以下を参照してください。

// divのElementオブジェクトを生成
var divElemnt = document.createElement("div");

// 生成したElementオブジェクトは、getElementById()で取得したElementオブジェクトと同様に変更が可能です
divElement.style.textContent = "JavaScriptで追加したdivタグです。";
divElement.style.color = "red";
divElement.style.backgroundColor = "blue";
                
// 生成したdivElementをElementオブジェクトの最後の子要素として追加
Elementオブジェクト.appendChild(divElement); 

Elementオブジェクト.removeChild(削除したいElementオブジェクト)

Elementオブジェクトの子要素のうち、引数で渡された「削除したいElementオブジェクト」を削除する事ができます。
削除したいElementオブジェクトは 「document.getElementById("id名");」 などを使って事前に準備しておく必要があります。

/*
 以下のような構造のHTMLだと仮定します
 <div id="parent">
     <div id="child">remove child</div>
     <div>not remove child</div>
 </div>
 */
// 子要素のElementオブジェクトを取得
var childElemnt = document.getElementById("child"); 
            
// idがparentの要素のidがchildの子要素を削除
document.getElementById("parent").removeChild(childElement);