!!!DOM [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(''); var links = document.getElementsByTagName('a'); var link; for (var i=0; i' + link + '
'); } w.document.write(''); w.document.close(); '''Bookmarklet''' javascript:var w=window.open('_blank'); w.document.write(''); var links = document.getElementsByTagName('a'); var link; for (var i=0; i' + link + '
'); } w.document.write('');w.document.close(); ::attributes ----