JavaScript
dom

JavaScriptでLet's DOM!

Domとは?

HTMLに新しく要素を追加でき、さらにオプション(srcやidなどの属性)も指定して後から操作することもできるという便利なモノ。使い方としては、何個使うかわからないような要素をjavascriptでかく、というような使い方があります。(もちろんそれ以外でもOK)

さて、早速使って行きましょう。

Domを使う

早く使いたい気持ちはわかります。ためんな!って飛んできそうですw早速始めましょう

1.変数に要素を入れる

変数には要素も入れることができます!

var 変数名 = document.createElement("タグ名");

一般的には、変数名はelementにすることが多いですが、タグ名やその要素が明確にわかるものがいいですね。特にDOMを何個かの要素に使う時は。
タグ名はHTMLのタグ名(img、pなど)

2.属性を決めちゃおう

変数名.setAttribute("オプション","値");

DOMでは基本変数名での操作が基本となります。
例えばelementに入れたimgの画像をimgs/bird.pngにしたい時は・・

element.setAttribute("src","imgs/bird.png");

になります。

3.HTMLに適用!

さて、今まで設定をしてきましたが、舞台(HTML)には要素がいません。今までは舞台裏で衣装を着ていたようなイメージです。

宛先要素.appendChild("変数名");

意外と簡単でした。この宛先要素は、document.bodyでもdocument.getElementById()を使っても、document.getElementsByClassName()でもいいです。まぁ、戻り値が要素になればいいんですよ。

どうでしたか?

Domは便利ですし、使いやすいです。ただし、Domは少しわかりにくい部分もあるので、他のサイトなども参考にしながら使って見てください。