12,673
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「==DOM== [JavaScript] {{amazon|4797336382}} http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html ====コンテンツへのアクセス==== =…」
==DOM==
[JavaScript]
{{amazon|4797336382}}
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html
====コンテンツへのアクセス====
=====HTML文書から=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|HTMLタグ名から要素を参照
|getElementsByTagName
|
|-
|id属性値から要素を参照
|getElementById
|
|-
|name属性値から要素を参照
|getElementsByName
|documentオブジェクトに対してのみ有効
|-
|}
※ getElementsByTagName、getElementsByNameは、NodeListを返す。これは配列のように扱えるが、配列ではない。利用できるのは、item() と length のみ。
=====タグの相対位置から=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|子要素を参照
|親要素.childNodes
|
|-
|子要素の先頭を参照
|親要素.firstChild
|
|-
|子要素の末尾を参照
|親要素.lastChild
|
|-
|親要素を参照
|子要素.parentNode
|
|-
|兄弟要素(前)を参照
|子要素.previousSibling
|
|-
|兄弟要素(後)を参照
|子要素.nextSibling
|
|-
|}
=====ノード判定=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|子要素が存在するかどうか
|hasChildNodes
|true/false
|-
|ノードの種類を判定
|nodeType
|
|-
|}
'''nodeType'''
{|class="wikitable"
!ノード種類
!nodeType
!nodeName
!nodeValue
|-
|要素
|1
|タグ名が大文字で
|null
|-
|属性
|2
|属性名
|属性値
|-
|テキスト
|3
|#text
|テキストの内容
|-
|コメント
|8
|#comment
|コメントの内容
|-
|ドキュメント
|9
|#document
|null
|-
|}
※ブラウザによっては、ホワイトスペースが、ノードとなるので注意
====タグ属性値の操作====
タグの属性値は、[http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ 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/2000/REC-DOM-Level-2-Style-20001113/ 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=====
----
[JavaScript]
{{amazon|4797336382}}
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html
====コンテンツへのアクセス====
=====HTML文書から=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|HTMLタグ名から要素を参照
|getElementsByTagName
|
|-
|id属性値から要素を参照
|getElementById
|
|-
|name属性値から要素を参照
|getElementsByName
|documentオブジェクトに対してのみ有効
|-
|}
※ getElementsByTagName、getElementsByNameは、NodeListを返す。これは配列のように扱えるが、配列ではない。利用できるのは、item() と length のみ。
=====タグの相対位置から=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|子要素を参照
|親要素.childNodes
|
|-
|子要素の先頭を参照
|親要素.firstChild
|
|-
|子要素の末尾を参照
|親要素.lastChild
|
|-
|親要素を参照
|子要素.parentNode
|
|-
|兄弟要素(前)を参照
|子要素.previousSibling
|
|-
|兄弟要素(後)を参照
|子要素.nextSibling
|
|-
|}
=====ノード判定=====
{|class="wikitable"
!用途
!メソッド
!備考
|-
|子要素が存在するかどうか
|hasChildNodes
|true/false
|-
|ノードの種類を判定
|nodeType
|
|-
|}
'''nodeType'''
{|class="wikitable"
!ノード種類
!nodeType
!nodeName
!nodeValue
|-
|要素
|1
|タグ名が大文字で
|null
|-
|属性
|2
|属性名
|属性値
|-
|テキスト
|3
|#text
|テキストの内容
|-
|コメント
|8
|#comment
|コメントの内容
|-
|ドキュメント
|9
|#document
|null
|-
|}
※ブラウザによっては、ホワイトスペースが、ノードとなるので注意
====タグ属性値の操作====
タグの属性値は、[http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ 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/2000/REC-DOM-Level-2-Style-20001113/ 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=====
----
© 2006 矢木浩人
