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
ページのリンクを抜き出して表示
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();
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();
- attributes
YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto
Copyright© 矢木 浩人 All Rights Reserved.