【DOM連載#2】JavaScriptのDOMでHTML要素を編集
DOMの連載記事、2回目は要素の属性や文字列の扱いについて書く。属性、文字列を取得したり、書き換えたりすることが可能だ。
前提としてHTML要素が特定できていなければ編集することが出来ない。なので、要素の参照が分からないという方は以下の記事をどうぞ。
【DOM連載#1】JavaScriptのDOMでHTML要素を参照
要素の編集はelementオブジェクトのプロパティで行う(以下サンプルコードの^^^の部分)。例えばinnerHTMLはよく使うのでご存じだろう。このプロパティはたくさんあるので個人的にまぁ需要があるだろうと思ったものに絞って紹介する。
document.getElementById('target').innerHTML = "hogehoge"; // ^^^^^^^^^
属性、文字列を扱うプロパティ
1. element.align
align属性(文字配置)にアクセスする。
element.align = 'center';
2. element.className
class属性にアクセスする。
element.className = 'warning';
3. element.hidden
hidden属性(表示 / 非表示)にアクセスする。
element.hidden = true;
4. element.id
id属性にアクセスする。
element.id = 'target';
5. element.innerHTML
要素内のHTMLにアクセスする。タグや属性も含めて書くことが出来るので万能。
element.innerHTML = '<a id="hoge" href="#">test</a>';
6. element.name
name属性にアクセスする。
element.name = 'mail';
7. element.textContent
要素の文字列(子孫要素含む)にアクセスする。innerHTMLとの違いは文字列のみを扱うこと。例えばタグを書いても有効とならず文字列として出力される。
element.textContent = 'test';
8. element.titile
title属性(hover時のテキスト)にアクセスする。
element.title = 'this is picture.';
9. element.href
href属性(リンク先URL)にアクセスする。
element.href = 'http://google.com'
10. element.alt
alt属性(画像が表示できない時の代替テキスト)にアクセスする。
element.alt = '花の写真';
11. element.height
height属性(高さ)にアクセスする。
element.height = 150;
12. element.src
src属性(ファイルパス、名)にアクセスする。
element.src = 'a001.jpg';
13. element.width
width属性(横幅)にアクセスする。
element.width = 150;
14. element.checked
checked属性(チェックされたcheckbox、radio)にアクセスする。
e[0].checked = true;
15. element.size
size属性(textの横幅)にアクセスする。
element.size = 100;
16. element.value
value属性にアクセスする。
element.value = 'default';
17. element.selectedIndex
optionにアクセスする。selectタグ内で何番目のoptionが選択されているか。selectタグmultiple属性対応は別の機会に公開する。
element.selectedIndex = 0;
18. element.selected
selected属性(選択されたoption)にアクセスする。
element.children[5].selected = true;
19. element.cols
cols属性(textarea横幅)にアクセスする。
element.cols = 50;
20. element.rows
rows属性(textarea高さ)にアクセスする。
element.rows = 5;
色々と紹介してきたが、基本的にはHTMLの属性名なので分かりやすいかと。で、やっぱりinnerHTMLが便利だからこれだけで十分だったりする。明示的にelement.id = 'xxx'などとやっておくほうがコードは読みやすいのかも知れないが。という訳で以上。