前回の
属性値やテキストの取得
の続き
あるHTMLのdivタグの文章を変えたいとなると
- 要素ノードを取得
- 直接取得
- 文書ツリー間の行き来
- イベントドリブンモデル
- 属性値やテキストを取得・設定
- 取得・設定
- フォームタグ
- ノードを追加・置換・削除
の、最後、ノードを追加・置換・削除の部分となります。
##ノードを追加・置換・削除
HTMLの編集には「innerHTML」を使うことができたが、これはセキュリティなどの観点からも使うタイミングを考えたいといけなかった。今回のアプローチはノードを作成して任意のノードにくっ付けると言う操作についてまとめる。
これで、要素・属性とテキストを区別できるので、ユーザーからの入力によってスクリプトが混入する危険が回避されやすくなる。反面、コードは冗長になりやすいため、
シンプルなコンテンツの編集 → innerHTMLプロパティ
複雑なコンテンツの編集 → 今回のアプローチ
と使い分けると良い。
###ノードの作成
まず、必要なタイプのノードを作成する。イメージはパズルのピースを作る感じ。
作成するにはcreateXxxxxと言う、ノードに応じて様々な種類がある。
主なcreateXxxxxメソッド
| メソッド | 生成するノード |
|---|---|
| createElement（要素名） | 要素ノード |
| createAttribute(属性名) | 属性ノード |
| createTextNode(テキスト) | テキストノード ※プレーンなテキストなのでHTMLがあってもテキスト扱いとなる。 |
| createCDATASection(テキスト) | CDATAセクション |
| createComment(テキスト) | コメントノード |
| createEntityReference(実体名) | 実体参照ノード |
| createProcessingInstruction(ターゲット名、データ) | 処理命令ノード |
| createDocumentFragment() | ドキュメントの断片 |
###ノード同士の組み立て・追加
ノード同士を組み立てる。ピースを一つの塊にする。
appendChild/insertBeforeメソッドを使う。
| メソッド | 概要 |
|---|---|
| elem.appendChild(node) | elem:要素オブジェクト の最後の子要素として、node:追加ノード を追加する |
| elem.insertBefore(node, desNode) | elem:要素オブジェクト の子要素 desNode:指定箇所のノード の後ろに node:追加ノード を追加する |
###属性ノードの追加
属性ノードの設定は、属性と同名のプロパティを設定するだけ。または、createAttributeメソッドを使用する。
let anchor = document.createElement('a');
// anchor.href = "http://~~~";
let href = document.createAttribute('href');
href.value = "http://~~~";
anchor.setAttributeNode(href);
・DocumentFragment()について
appendChildで追加するたび、コンテンツが再描写される。そのため、forなどで繰り返して追加するとパフォーマンスが低下する。そのため、DocumentFragment()オブジェクト上でノードの塊を作成してから、一括で追加する。
###ノードの置換・削除
####ノードの置換 replaceChildメソッド
elem.replaceChild(after, before)
elem:要素オブジェクト after:置き換え後のノード before:置き換え対象のノード
####ノードの削除 removeChildメソッド, removeAttributeメソッド
elem.removeChild(node)
elem.removeAttribute(属性名)
elem;属性オブジェクト node:削除対象のノード
これで、追加・置換・削除ができるようになった。
結構、一つの物を変更するだけでも手間がかかるんですね…
いい勉強になりました！
→ 完
→ と思いきやおまけ スタイルシートの操作