prog*sig

DOM操作をするAPIはたくさんある。

■12.1  Using innerHTML: A Quick and Easy Approach to Adding Content

innerHTMLはDOM Level 0でとっても有名なプロパティ。
ただDOM 0だけあって、tableの処理とかすべてに標準があるわけではない。
HTML5では正式な標準が定義されるかも。
同じくouterHTMLもHTML5に取り込まれようとしています。
outerHTMLは外枠も含めたものを文字列として取得できる。

■12.2  Inserting Elements Before Existing Page Elements

parent.insertBefore(newDiv, refElement);

■12.3  Appending a New Element to the End of a Page

appendChild
この辺の違いは[JavaScript] DOM Nodeに子ノードを追加 - latest logを見るのが早い

■12.4  Triggering Older Versions of IE to Style New Elements

IE8とかだとHTML5は使えないので、例えばarticleタグを直接書いたときそのタグの定義は存在しないので上手く判断できず空要素を作って変なDOMツリーを作ってしまう。
このとき問題なのはDOMツリーがおかしいのでCSSで装飾ができないこと。

• IEでHTML5の要素をどうこうするやつ - vantguarde - web:g

しかし、JavaScript経由で要素を作るとそれを要素として認識するので、タグの定義が無くてもまともなDOMツリーを作成できる。

document.createElement("article");

これならDOMツリーがちゃんとできるので、CSS装飾が行えるようになる。
これを利用したのがhtml5.js。

• HTML5の実践 | クリエイティブ・タブロイド withD（ウィズ・ディー）

■12.6  Adding Text to a New Paragraph

テキストもノードなので、document.createTextNodeでテキストノードを作成して挿入できる。

■12.7  Adding Attributes to an Existing Element

既に存在してる要素へ属性を追加する。
createAttributeを使い属性を作ってからsetAttributeで要素へ属性を設定できる。

var someElement = document.getElement("elem");
var newAttr = document.createAttribute("newAttribute");// 属性を作る
newAttr.nodeValue = "testvalue";// 属性値を決める
someElement.setAttribute(newAttr);
// 下だと１行でできる
someElement.setAttribute("newAttribute","testvalue");

setAttributeでまとめてやった方が単純なのにcreateAttributeはどういう時に使うべきか。XML

■12.8  Testing for a Boolean Attribute

属性をもっているかを判定するにはhasAttributeを使う。
またIE7ではさぽーとしてない。

var targetNode = document.getElementById("target");
if (targetNode.hasAttribute("class")) {
   alert(targetNode.getAttribute("class"));
}

IE7とかでも使えそうな感じのhasAttribute関数はこんな感じか。

function hasAttribute(node, attrName) {
  if (!node.hasAttribute) {
    var attr = node.getAttributeNode(attrName);
    return attr && attr.specified;
  }
  return node.hasAttribute(attrName);
}

■12.9  Removing an Attribute

属性を削除するにはremoveAttributeを使う。

if (targetNode.hasAttribute("class")) {
   targetNode.removeAttribute("class");
   alert(targetNode.getAttribute("class")); // null
}
// div.setAttribute("class",null); nullをセットするのは間違い

■12.10  Moving a Paragraph

最後にある要素を最初の要素の前に移動する。

var para = document.getElementsByTagName("p");
var parent = para[0].parentNode;
parent.insertBefore(para[para.length-1], para[0]);

■12.12  Adding Rows to an Existing Table

テーブルに列を追加する。

• Sum Table Column

テーブルに列追加するだけなのに結構面倒な事になる。

1. Create the table row (tr).
2. For each table cell, create a table cell element (td).
3. For each table cell, create a text node for its data, and set the data.
4. Append the text node to the table cell.
5. Append the table cell to the table row.
6. When all of the table cells have been appended to the table row, append the table
row to the tbody element, and the tbody element to the table.

特に6のtbodyに入れてからtableタグに追加しないとIE7でエラーになる点が面倒。

■12.13  Removing a Paragraph from a div Element

removeChildで要素を削除できる。

para.parentNode.removeChild(para);

IE7では～って感じが多かった。DOM APIはIE8からましになったって事か。