「DOM」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==DOM== [JavaScript] {{amazon|4797336382}} http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/def-index.html ====コンテンツへのアクセス==== =…」) |
|||
| 1行目: | 1行目: | ||
==DOM== | ==DOM== | ||
| − | [JavaScript] | + | [[JavaScript]] |
{{amazon|4797336382}} | {{amazon|4797336382}} | ||
| 126行目: | 126行目: | ||
'''ページのリンクを抜き出して表示''' | '''ページのリンクを抜き出して表示''' | ||
var w=window.open('_blank'); | var w=window.open('_blank'); | ||
| − | w.document.write(' | + | w.document.write('<html><head></head><body>'); |
var links = document.getElementsByTagName('a'); | var links = document.getElementsByTagName('a'); | ||
var link; | var link; | ||
| − | for (var i=0; i | + | for (var i=0; i<links.length; i++) { |
link=links[i].getAttribute('href'); | link=links[i].getAttribute('href'); | ||
| − | w.document.write(' | + | w.document.write('<a href=\"' + link + '\">' + link + '</a><br>'); |
} | } | ||
| − | w.document.write(' | + | w.document.write('</body></html>'); |
w.document.close(); | w.document.close(); | ||
'''Bookmarklet''' | '''Bookmarklet''' | ||
| − | javascript:var w=window.open('_blank'); w.document.write(' | + | 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月15日 (土) 08:02時点における版
目次
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();
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 矢木浩人
