ホームページ > 記事 > ウェブフロントエンド > jsベースのDOMにおけるドキュメントオブジェクトの共通属性メソッドを詳しく解説
jsベースのDOMにおけるドキュメントオブジェクトの共通属性メソッドを詳しく解説
- 高洛峰オリジナル
- 2016-12-08 14:35:351260ブラウズ
-----導入
ブラウザに読み込まれるすべての HTML ドキュメントは Document オブジェクトになります。
Document オブジェクトを使用すると、スクリプトから HTML ページ内のすべての要素にアクセスできます。
Property
1 document.anchors ドキュメント内のすべての Anchor オブジェクトへの参照を返します。 document.links/document.forms/document.images などもあります。
2 document.URL 現在のドキュメントの URL を返します
3 document.title 現在のドキュメントのタイトルを返します
4 document.body 戻り値body 要素のノード
メソッド
1 document.close() document.open() メソッドで開かれた出力ストリームを閉じ、選択されたデータを表示します。
<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
</script>
</head>
<body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>2 document.createElement() 要素ノードを作成します。
<!DOCTYPE html> <html> <!DOCTYPE html> <head> </head> <body> <p>hello world</p> <script> var a = document.createElement('hr'); document.body.appendChild(a) </script> </body> </html>
3 document.createAttribute() 属性ノードを作成します。
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};
</script>
</body>
</html>4 document.createTextNode() テキストノードを作成します。
<!DOCTYPE html> <html> <!DOCTYPE html> <head> </head> <body> <p>hello world</p> <script> var a = document.createTextNode('hahahah'); document.body.appendChild(a) </script> </body> </html>
5 document.getElementsByClassName() ドキュメント内の指定されたクラス名を持つすべての要素のコレクションを NodeList オブジェクトのコレクションとして返します。いわゆる NodeList オブジェクト コレクションは、配列に似たデータ形式であり、長さ属性のみが提供され、配列内のプッシュ メソッドとポップ メソッドは提供されません。
6 document.getElementById() は、指定された ID を持つ最初のオブジェクトへの参照を返します。
7 document.getElementsByName() は、指定された名前を持つオブジェクトのコレクションを返します。
8 document.getElementsByTagName() は、指定されたタグ名を持つオブジェクトのコレクションを返します。
9 document.write() は、HTML 式または JavaScript コードをドキュメントに書き込みます。注: HTML ドキュメントがロードされた後に write メソッドを使用すると、書き込みコンテンツが元の HTML ドキュメントを上書きします。
りー