2. HTML要素の操作

HTMLの要素はJavaScriptを使用することで取得・変更・追加・削除が行えます。
以下は良く使われるHTML要素操作用の関数です。

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); 

This software includes the work that is distributed in the Apache License 2.0

Last modified: Thursday, 10 May 2018, 10:08 AM