「DOM」の版間の差分
ナビゲーションに移動
検索に移動
| 1行目: | 1行目: | ||
| − | ==DOM== | + | ==[[DOM]]== |
[[JavaScript]] | | [[JavaScript]] | | ||
{{amazon|4797336382}} | {{amazon|4797336382}} | ||
| − | http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html | + | http://www.w3.org/TR/2000/REC-[[DOM]]-Level-2-Core-20001113/def-index.html |
====コンテンツへのアクセス==== | ====コンテンツへのアクセス==== | ||
| − | ===== | + | =====[[HTML]]文書から===== |
{|class="wikitable" | {|class="wikitable" | ||
!用途 | !用途 | ||
| 14行目: | 14行目: | ||
!備考 | !備考 | ||
|- | |- | ||
| − | | | + | |[[HTML]]タグ名から要素を参照 |
|getElementsByTagName | |getElementsByTagName | ||
| | | | ||
| 52行目: | 52行目: | ||
|- | |- | ||
|兄弟要素(前)を参照 | |兄弟要素(前)を参照 | ||
| − | |子要素. | + | |子要素.pre[[vi]]ousSibling |
| | | | ||
|- | |- | ||
| 122行目: | 122行目: | ||
するために、className属性となっている。 | するために、className属性となっている。 | ||
=====getAttribute/setAttribute===== | =====getAttribute/setAttribute===== | ||
| − | + | [[DOM]]では、属性アクセスのインターフェースとして、プロパティだけでなく、getAttribute/setAttributeメソッドを提供している。 | |
| − | ''' | + | '''ページの[[リンク]]を抜き出して表示''' |
var w=window.open('_blank'); | var w=window.open('_blank'); | ||
w.document.write('<html><head></head><body>'); | w.document.write('<html><head></head><body>'); | ||
| 135行目: | 135行目: | ||
w.document.write('</body></html>'); | w.document.write('</body></html>'); | ||
w.document.close(); | w.document.close(); | ||
| − | '''Bookmarklet''' | + | '''[[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(); | 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===== | =====attributes===== | ||
---- | ---- | ||
2020年2月16日 (日) 04:24時点における最新版
目次
DOM
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();
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 矢木浩人
