Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

【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'などとやっておくほうがコードは読みやすいのかも知れないが。という訳で以上。