21.DOM操作とは② ～JavaScriptでHTMLを自由に操作～
昨日に引き続き、DOM操作について整理していきます。
HTML要素の追加
JavaScriptでHTMLの要素を追加することもできます。
コードを書きながら整理していきます。
今回の流れは以下のようになります。
- login_btnというオブジェクトを作成する
- そこへaタグ要素を代入
- aタグの要素がもつキー(プロパティ)に対して、データを設定
- ブラウザからId指定でHTMLを取得
- 子要素としてlogin_btnオブジェクト内のaタグを追加
では、１つずつコードを書きながら確認していきます。
オブジェクトの作成とHTMLの要素代入
今回の目標は
<a id="login" href ="test.jp" class ="btn">ログイン</a>
をHTMLに追記する。これです。
早速、コード書いていきます。
const login_btn = document.createElement('a')
const login_btnで、オブジェクトを作成。
document.createElement('a')で、
HTML要素のaタグを作成し、オブジェクト「login_btn」に代入。
オブジェクトに代入した要素に対して、データを設定する
先程、作成したオブジェクトに代入した要素のキー(プロパティ)に対して
データを設定していきます。
login_btn.innerText = 'ログイン'
innerTextプロパティは、
HTMLタグで囲まれたテキスト(表示内容)を設定するプロパティです。
先程のコードでは、「ログイン」というテキストを設定しています。
次からまとめて、id、class、hrefを設定します。
それにはオブジェクトに用意されているsetAttribute関数を使います。
setAttribute関数は引数を２つ必要とします。
１つ目は、設定するHTMLタグの属性の名前
２つ目は、1つ目で選択した属性に代入する文字列です。
先程のlogin_btnオブジェクトのid属性にloginという文字列を設定する場合は、
login_btn.setAttribute('id','login')
class属性にbtnを設定する場合は
login_btn.setAttribute('class','btn')
href属性にtest.jpを設定する場合は
login_btn.setAttribute('href','test.jp')
これで、login_btnオブジェクトのプロパティにはそれぞれデータが設定されました。
HTMLに要素を追加
次は、この設定済みのオブジェクトの中身であるHTML要素を、
ブラウザが取得したHTMLに追加します。
まずはコードから
document.getElementById('test-job').appendChild(login_btn)
１つずつ見ていきましょう。
documentはブラウザが読み込んだHTMLでしたね。参考までに昨日の記事を。
20.DOM操作とは ～JavaScriptでHTMLを自由に操作～ - web制作のしおり
getElementById('test-job')は、Idがtest-jobの要素を指定して取得する関数です。
appendChild(login_btn)は引数に指定したオブジェクトに子要素を追加する関数です。
まとめると、
ブラウザで読み込んだHTMLの
test-jobというidが指定されている要素を取得して、
その子要素としてlogin_btnオブジェクト内の要素を追加する。
コードだけ見たら、わからないと思ってしまいますが、
やはり言葉にして見ると理解が進みます。
全てを通して流れを確認する
オブジェクト作成して、設定します。
const login_btn = document.createElement('a')
login_btn.innerText = 'ログイン'
login_btn.setAttribute('id','login')
login_btn.setAttribute('class','btn')
login_btn.setAttribute('href','test.jp')
ここまででlogin_btnオブジェクトに要素として以下が設定されました。
<a id="login" href ="test.jp" class ="btn">ログイン</a>
そして、
document.getElementById('test-job').appendChild(login_btn)
ブラウザで読み込んだHTMLの
test-jobというidが指定されている要素を取得して、
その子要素としてlogin_btnオブジェクト内の要素を追加する。
最終的には
<div id="test-job">
<a id="login" href ="test.jp" class ="btn">ログイン</a>
</div>
上記のHTMLになります。
今日のまとめ
- オブジェクトにHTML要素を追加して、各種属性やテキストを設定できる
- オブジェクト内のHTML要素をブラウザが読み込んだHTMLに追加することが出来る
今日はDOM操作のHTML要素追加について整理しました。
JavaScriptは面白いですね。
HTMLに動きをつけるという意味がよく分かる気がします。
言葉にするとさらにわかりやすいです。
では、また。
