トップ 一覧 ping 検索 ヘルプ RSS ログイン

DOMの変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
!!!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
----