勉強ノート：DOM操作

要素ノードの操作の手順

1. Objectの取得
2. Objectプロパティ値の変更

個別要素へのアクセス

• document.getElementById(id): idに対応するオブジェクトを返す
• document.getElementsByTagName(tag): p tagなど一致するオブジェクトのリストを返す
• document.getElementsByName(name): name属性に一致するオブジェクトのリストを返す
• document.getElementsByClassName(name): Class属性に一致するオブジェクトのリストを返す

セレクタ式を使ったアクセス

• document.querySelector(selector): 1つ
• document.querySelectorAll(selector):

相対パスでのアクセス(getxxx, queryxxxの後に使う)

• obj.firstChild
• obj.nextSibling
• obj.firstElementChild
• obj.nextElementSibling

Tagで修飾されたテキストへのアクセス

getxxxなどでオブジェクトを取得した後、以下の方法でアクセスできる。

• obj.innerHTML： 文書を埋め込むのに使う、テキストだけ返す
• obj.contentText：　HTMLを埋め込むのに使う、タグを含んだ形で返す

Event-Driven

イベントハンドラを登録するには以下の方法がある。

1. タグ内の属性として宣言:
2. 要素オブジェクトのプロパティとして宣言: JS内でObjectを取得し、onclickなどのイベントプロパティに関数オブジェクトを設定する。複数のハンドラは紐付けられない。
3. addEventListenerメソッドを使う: elem.addEventListener(type, listener, capture)

ノードの作成、削除

• createElement(element)
• createAttribute(attr)
• createTextNode(text)
• elem.appendChild(node)

Ref

山田祥寛,JavaScript本格入門[改訂新版]