DOM

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html

コンテンツへのアクセス

HTML文書から

用途	メソッド	備考
HTMLタグ名から要素を参照	getElementsByTagName
id属性値から要素を参照	getElementById
name属性値から要素を参照	getElementsByName	documentオブジェクトに対してのみ有効

※ getElementsByTagName、getElementsByNameは、NodeListを返す。これは配列のように扱えるが、配列ではない。利用できるのは、item() と length のみ。

タグの相対位置から

用途	メソッド	備考
子要素を参照	親要素.childNodes
子要素の先頭を参照	親要素.firstChild
子要素の末尾を参照	親要素.lastChild
親要素を参照	子要素.parentNode
兄弟要素(前)を参照	子要素.previousSibling
兄弟要素(後)を参照	子要素.nextSibling

ノード判定

用途	メソッド	備考
子要素が存在するかどうか	hasChildNodes	true/false
ノードの種類を判定	nodeType

nodeType

ノード種類	nodeType	nodeName	nodeValue
要素	1	タグ名が大文字で	null
属性	2	属性名	属性値
テキスト	3	#text	テキストの内容
コメント	8	#comment	コメントの内容
ドキュメント	9	#document	null

※ブラウザによっては、ホワイトスペースが、ノードとなるので注意

タグ属性値の操作

タグの属性値は、Document Object Model (DOM) Level 2 HTML Specificationに定められている。*http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html これらには、style 属性や、class 属性が規定されていない。

スタイルシートの適用に関しては、http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.htmlにて別途規定されている。

class 属性については、名前の衝突を回避

するために、className属性となっている。

getAttribute/setAttribute

DOMでは、属性アクセスのインターフェースとして、プロパティだけでなく、getAttribute/setAttributeメソッドを提供している。

ページのリンクを抜き出して表示

var w=window.open('_blank');
w.document.write('<html><head></head><body>');
var links = document.getElementsByTagName('a');
var link;
for (var i=0; i<links.length; i++) {
link=links[i].getAttribute('href');
  w.document.write('<a href=\"' + link + '\">' + link + '</a><br>');
}
w.document.write('</body></html>');
w.document.close();

Bookmarklet

javascript:var w=window.open('_blank'); w.document.write('<html><head></head><body>'); var links = document.getElementsByTagName('a'); var link; for (var i=0; i<links.length; i++) { link=links[i].getAttribute('href'); w.document.write('<a href=\"' + link + '\">' + link + '</a><br>'); } w.document.write('</body></html>');w.document.close();

MyMemoWiki

DOM

目次

DOM