- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!DOM
[初めてのJavaScript]
[JavaScript]
{{amazon 4797336382}}
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/]に定められている。*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|http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/]にて別途規定されている。
*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
----