トップ 差分 一覧 ping ソース 検索 ヘルプ PDF RSS ログイン

DOM


RSS 無料英単語

目次



記事一覧

キーワード

DOM

[JavaScript]


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(); 

attributes



YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto

Copyright© 矢木 浩人 All Rights Reserved.