タグエレメントの取得と新規追加
web ページを構成しているのは HTML タグと呼ばれるタグエレメントです。
JavaScript でタグエレメントを取得できなければ、web ページを動的に操作することができません。
HTMLCollection = document.getElementsByTagName('tag_name');
タグエレメントを JavaScript で取得や新規追加するには、Document や Element インターフェイスの .getElementsByTagName() や .createElement() などのメソッドを使います。
タグエレメントの取得に関しては以下のタグエレメント取得メソッド一覧
を参照してください。
新規作成に関しては以下のタグエレメントの新規作成
を参照してください。
ページ内 Index
タグエレメント取得メソッド一覧
JavaScript によるタグエレメントの取得には以下のメソッドを利用します。web ページ上のエレメントを取得することでそのタグの内容や装飾を操作することができます。
JavaScript
| Method | Return Value | Desc |
|---|---|---|
| .getElementsByTagName('tag_name') | HTMLCollection | タグエレメント名 |
| .getElementById('id') | HTMLElement/null | エレメントのID名 |
| .getElementsByClassName('class_name') | HTMLCollection | エレメントのclass名 |
| .getElementsByName('name') | NodeList | エレメントのname名 |
| .querySelector() | HTMLElement | CSSのセレクタと同じ |
| .querySelectorAll() | NodeList | CSSのセレクタと同じ |
getElementById('')やquerySelector('')はマッチした最初のエレメントを取得します。
以下の方法でNodeを取得することもできますが不安定なことがあります。
| Syntax | Desc |
|---|---|
| document.documentElement | <html>エレメント |
| document.head | <head>エレメント |
| document.body | <body>エレメント |
| document.forms | <form>エレメント、HTMLCollection |
| document.images | <img>エレメント、HTMLCollection |
| document.links | <a>エレメントや<area>エレメント、HTMLCollection |
| document.scripts | <script>エレメント、HTMLCollection |
web ページを構成するタグエレメントを取得できるのですが、HTMLElement なのか、HTMLCollection なのか、Node オブジェクトなのかに注意してください。
取得できるオブジェクトによって利用できるプロパティやメソッドに違いがあることがあります。
タグエレメントの新規作成
document.createElement() メソッドでドキュメントにタグエレメントを新規作成ができます。第1引数はタグ名です。
以下の例では、タグエレメントの新規作成とその属性も作成し、属性の値を設定しています。
// タグエレメントの新規作成
var _elem = document.createElement("p");
// タグエレメントの属性の作成と追加
var _att = document.createAttribute( "name" );
_elem.setAttributeNode( _att );
// 属性の値を設定
_elem.setAttribute( "name", "foo" );
詳しくは.createElement() メソッド
を参照してください。
Example
以下の例は、表示されるリストをクリックすると id="foo" のタグエレメントを取得し、アラートでそのエレメントの内容を表示します。